xt / xcx-book · Commits

Go to a project

Commit 0db86fd127e0dbbc058186f0c295b1baffaf7e52

Authored by vking
1 parent 3521dcd1
build: skipped

cmyy

Inline Side-by-side
Showing 5 changed files with 533 additions and 0 deletions
@@ -46,6 +46,7 @@ @@ -46,6 +46,7 @@
46 "pages/pinglun/create", 46 "pages/pinglun/create",
47 "pages/pinglun/success", 47 "pages/pinglun/success",
48 "pages/pinglun/mylist", 48 "pages/pinglun/mylist",
  49 + "pages/tcads/cmyy",
49 "pages/pinglun/video" 50 "pages/pinglun/video"
50 ], 51 ],
51 "subpackages": [ 52 "subpackages": [
  1 +// pages/taocan/index.js
  2 +import util from '../../utils/util';
  3 +import App from '../../utils/api';
  4 +Page({
  5 +
  6 + /**
  7 + * 页面的初始数据
  8 + */
  9 + data: {
  10 + current:0,
  11 + activityId:'',
  12 + packs:{},
  13 + hasNoSets:false,//没有任何套餐
  14 + hasLoading:true,
  15 + },
  16 + activityId:'',
  17 + /**
  18 + * 生命周期函数--监听页面加载
  19 + * sid 商家id
  20 + * pid 套餐id
  21 + */
  22 + onLoad: function (options) {
  23 + this.options={sid:292,pid:0}
  24 + this.taocanInit()
  25 + },
  26 +
  27 + /**
  28 + * 生命周期函数--监听页面初次渲染完成
  29 + */
  30 + onReady: function () {
  31 + if(wx.getMenuButtonBoundingClientRect){
  32 + let rect=wx.getMenuButtonBoundingClientRect()
  33 + console.log('rect',rect);
  34 + this.setData({
  35 + shareTop:rect.top,
  36 + shareHeight:rect.height,
  37 + shareLeft:rect.left-68,
  38 + })
  39 + }
  40 + },
  41 +
  42 + /**
  43 + * 生命周期函数--监听页面显示
  44 + */
  45 + onShow: function () {
  46 +
  47 + },
  48 +
  49 + /**
  50 + * 生命周期函数--监听页面隐藏
  51 + */
  52 + onHide: function () {
  53 +
  54 + },
  55 +
  56 + /**
  57 + * 生命周期函数--监听页面卸载
  58 + */
  59 + onUnload: function () {
  60 +
  61 + },
  62 +
  63 + /**
  64 + * 页面相关事件处理函数--监听用户下拉动作
  65 + */
  66 + onPullDownRefresh: function () {
  67 +
  68 + },
  69 +
  70 + /**
  71 + * 页面上拉触底事件的处理函数
  72 + */
  73 + onReachBottom: function () {
  74 +
  75 + },
  76 +
  77 + /**
  78 + * 用户点击右上角分享
  79 + */
  80 + onShareAppMessage: function () {
  81 + let pack=this.data.packs[this.activityId]
  82 + let path=util.http_build_query({sid:pack.sid,pid:this.activityId,fromid:getApp().openid},'/pages/taocan/index')
  83 + let shareParams={
  84 + title:pack.name||'请客订包间，就上周到安排',
  85 + path:path,
  86 + }
  87 + if(pack.main_url){
  88 + shareParams.imageUrl=pack.main_url+'?imageView2/2/w/450'
  89 + }
  90 + console.log('shareParams==>',shareParams)
  91 + return shareParams
  92 + },
  93 +
  94 + async taocanInitScene(){
  95 + if(this.options.scene){
  96 + //解析scene追加到options
  97 + let res=await App.Customer.GetWxLiteCodeInfo({str_code:this.options.scene})
  98 + let scene=JSON.parse(res.data.scene)
  99 + this.options={...this.options,...scene}
  100 + console.log('this.options',this.options)
  101 + }
  102 + //fromid存在则设置推荐关系
  103 + if(this.options.fromid) {
  104 + App.Customer.SetShareRel({
  105 + sid:this.options.sid,
  106 + fid:this.options.pid,
  107 + openid_main:this.options.fromid,
  108 + openid_cover:await getApp().getOpenid(),
  109 + })
  110 + }
  111 + },
  112 + async taocanInit(){
  113 + this.setData({
  114 + hasLoading:true,
  115 + hasLoadTimeout:false,
  116 + })
  117 + await this.taocanInitScene();
  118 + let options=this.options
  119 + this.activityId=options.pid
  120 + App.Foodset.GetFoodsetList({sid:options.sid}).then(res=>{
  121 + let packs={}
  122 + res.data.some(r=>{
  123 + r.nameSub=r.name.length>6?(r.name.substr(0,6)+'…'):r.name;
  124 + r['包间可用']=r.service.indexOf('包间可用')>-1;
  125 + r['免预约']=r.service.indexOf('免预约')>-1;
  126 + r['随时退']=r.service.indexOf('随时退')>-1;
  127 + r.sid=this.data.sid
  128 + packs[r.id]=r
  129 + })
  130 + while(Object.keys(packs).length<3){
  131 + packs[Math.random()]={}
  132 + }
  133 + try{
  134 + if(!packs[this.activityId]){
  135 + if(this.activityId>0){
  136 + util.toast('套餐已下架','none')
  137 + }
  138 + this.activityId=res.data[0].id
  139 + }
  140 + this.setData({
  141 + packs:packs,
  142 + activityId:this.activityId,
  143 + current:this.getCurrent(this.activityId,packs),
  144 + hasLoading:false,
  145 + })
  146 + this.getActivityDetail()
  147 + }catch (e){
  148 + this.setData({
  149 + hasNoSets:true,//没有任何套餐
  150 + hasLoading:false,
  151 + });
  152 + }
  153 + }).catch(()=>{
  154 + this.setData({
  155 + hasLoadTimeout:true,//网络异常
  156 + });
  157 + })
  158 + },
  159 + getCurrent(id,packs){
  160 + let ps=Object.keys(packs)
  161 + let index=ps.indexOf(id)
  162 + let length=ps.length;
  163 + let current=0
  164 + if(index>length-3){
  165 + current=length-3;
  166 + }else{
  167 + current=index>0?(index-1):0
  168 + }
  169 + return current>0?current:0
  170 + },
  171 + touchTab(e){
  172 + let activityId=util.attr(e,'id')
  173 + if(!activityId) return;
  174 + this.activityId=activityId
  175 + let obj={
  176 + activityId:this.activityId,
  177 + }
  178 + let id=util.attr(e,'id')
  179 + obj.current=this.getCurrent(id,this.data.packs)
  180 + this.setData(obj)
  181 + this.getActivityDetail();
  182 + },
  183 + swiperChange(e){
  184 + console.log(e)
  185 + if(e.detail.source!='touch') return;
  186 + this.setData({
  187 + current:e.detail.current
  188 + })
  189 + },
  190 + toggleRule(){
  191 + this.setData({
  192 + hasShowRule:!this.data.hasShowRule,
  193 + })
  194 + },
  195 + getActivityDetail(){
  196 + let packs=this.data.packs
  197 + if(!packs[this.activityId].operator){
  198 + App.Foodset.GetFoodsetDetail({fid:this.activityId}).then(res=>{
  199 + packs[this.activityId]={...packs[this.activityId],...res.data}
  200 + this.setData({
  201 + packs:packs,
  202 + })
  203 + })
  204 + }
  205 + },
  206 + createSaleIng:false,
  207 + createSale(){
  208 + this.createSaleIng=true
  209 + let pack=this.data.packs[this.activityId]
  210 + App.PayOnline.JsApiPay({
  211 + pay_type:1,
  212 + fid:this.activityId,
  213 + sid:pack.sid,
  214 + }).then(res=>{
  215 + this.createSaleIng=false
  216 + if(res.ret==200){
  217 + let order_id=res.data.order_id
  218 + res.data.timeStamp+=""
  219 + wx.requestPayment({
  220 + ...res.data,
  221 + success:res=>{
  222 + util.toast('支付成功')
  223 + setTimeout(()=>{
  224 + wx.navigateTo({
  225 + url:'/pages/taocan/order?id='+order_id,
  226 + })
  227 + },1000)
  228 + },
  229 + })
  230 + }else{
  231 + util.toast(res.msg,'none')
  232 + }
  233 + }).catch(res=>{
  234 + this.createSaleIng=false
  235 + })
  236 + },
  237 + share(){
  238 + this.selectComponent('#share').show()
  239 + },
  240 +})
  1 +{
  2 + "navigationBarBackgroundColor": "#ffffff",
  3 + "navigationBarTextStyle": "black",
  4 + "usingComponents": {
  5 + "nav":"/components/nav/nav",
  6 + "share":"/components/2.0/taocan/share"
  7 + }
  8 +}
  1 +<!--pages/taocan/index.wxml-->
  2 +<wxs src="../../utils/util.wxs" module="util" />
  3 +<view class="view flex flex-direction justify-center align-center" style="width: 100vw;height: 100vh;" wx:if="{{hasLoading}}">
  4 + <view class="flex flex-direction justify-center align-center" wx:if="{{hasLoadTimeout}}">
  5 + <image src="http://nosqn.colorcun.com/timeout.png" style="width: 520rpx;height: 348rpx;"></image>
  6 + <view class="margin-tb-lg txt-28-h">请求超时啦～重试一下看看</view>
  7 + <view class="reflush flex justify-center align-center" bindtap="taocanInit">点击重试</view>
  8 + </view>
  9 + <view wx:else="" class="flex flex-direction justify-center align-center">
  10 + <image src="http://nosqn.colorcun.com/loading.gif" style="width: 40rpx;height: 40rpx;"></image>
  11 + <view class="margin-top bg-white txt-24-h">加载中，请稍后…</view>
  12 + </view>
  13 +</view>
  14 +<block wx:else="">
  15 + <nav hasHome>
  16 + <view style="top:{{shareTop}}px;height:{{shareHeight}}px;left:{{shareLeft}}px;"
  17 + catchtap="share"
  18 + class="share view flex align-center justify-center bg-white round">
  19 + <view class="icon view"></view>
  20 + <view class="text margin-left-xs">分享</view>
  21 + </view>
  22 + </nav>
  23 + <!--
  24 + <swiper
  25 + display-multiple-items="3"
  26 + class="view margin-left-lg header text-black"
  27 + bindchange="swiperChange"
  28 + current="{{current}}"
  29 + style="height: 80rpx;">
  30 + <block wx:for="{{packs}}" wx:key="*this">
  31 + <swiper-item
  32 + bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
  33 + class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
  34 + <view class="txt-32-h text-cut" style="width: 220rpx;height: 56rpx;">
  35 + <text class="swiper-item-txt">{{item.name}}</text>
  36 + </view>
  37 + </swiper-item>
  38 + </block>
  39 + </swiper>
  40 + -->
  41 + <block wx:if="{{!hasNoSets}}">
  42 + <scroll-view class="view margin-left-lg header text-black"
  43 + scroll-x="true" bindscroll="scroll" scroll-into-view="PID{{activityId}}"
  44 + style="width: 100%;white-space: nowrap;height:80rpx;">
  45 + <block wx:for="{{packs}}" wx:key="*this">
  46 + <view id="PID{{item.id}}"
  47 + bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
  48 + class="view swiper-item {{activityId==item.id?'active':''}} flex align-center">
  49 + <view class="txt-32-h swiper-item-txt">
  50 + {{item.nameSub}}
  51 + </view>
  52 + </view>
  53 + </block>
  54 + </scroll-view>
  55 + <view class="view" style="padding-bottom: 150rpx;padding-top: 80rpx;">
  56 + <view class="view box margin-lr margin-top-lg margin-bottom-sm padding">
  57 + <view class="view text-xxl text-bold">{{packs[activityId].name}}</view>
  58 + <view class="view flex align-end">
  59 + <view class="text-orange txt-28-h" style="margin-bottom: 4rpx;">¥</view>
  60 + <view class="text-orange txt-44-h margin-right-sm text-bold">{{packs[activityId].sale_price}}</view>
  61 + <view class="huaxian flex align-end">
  62 + <view class="txt-20-h" style="margin-bottom: 8rpx;">¥</view>
  63 + <view class="txt-28-h" style="margin-bottom: 4rpx;">{{packs[activityId].market_price}}</view>
  64 + </view>
  65 + <view class="view flex text-orange align-end margin-left-sm" wx:if="{{packs[activityId].discount>0}}" >
  66 + <view class="view tag" style="margin-bottom: 16rpx;"></view>
  67 + <view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">{{packs[activityId].discount*10}}折</view>
  68 + </view>
  69 + </view>
  70 + <view class="view flex align-center txt-28-h margin-bottom labels" style="margin-top: 10rpx;">
  71 + <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['包间可用']}}">
  72 + <view class="view icon icon1"></view>
  73 + <view class="view txt-28-h bg-white">包间可用</view>
  74 + </view>
  75 + <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['免预约']}}">
  76 + <view class="view icon icon2"></view>
  77 + <view class="view txt-28-h bg-white">免预约</view>
  78 + </view>
  79 + <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['随时退']}}">
  80 + <view class="view icon icon3"></view>
  81 + <view class="view txt-28-h bg-white">随时退</view>
  82 + </view>
  83 + </view>
  84 + <image src="{{packs[activityId].detail_url}}" style="width:100%;border-radius: 10rpx;" mode="widthFix"></image>
  85 + </view>
  86 + <view class="view box margin-lr margin-top-sm margin-bottom-sm">
  87 + <view class="txt-30-h padding solid-bottom text-bold">购买须知</view>
  88 + <view class="view padding block">
  89 + <view class="flex align-center margin-bottom-sm">
  90 + <view class="dot"></view>
  91 + <view class="txt-30-h text-bold">有效期</view>
  92 + </view>
  93 + <view class="text-df">{{util.unixtoTime(packs[activityId].eff_time_start,'YYYY.MM.DD')}}-{{util.unixtoTime(packs[activityId].eff_time_end,'YYYY.MM.DD HH:II')}}</view>
  94 + </view>
  95 + <view class="view padding block">
  96 + <view class="flex align-center margin-bottom-sm">
  97 + <view class="dot"></view>
  98 + <view class="txt-30-h text-bold">使用时间</view>
  99 + </view>
  100 + <view class="text-df">{{packs[activityId].use_time}}</view>
  101 + </view>
  102 + <view class="view padding block padding-bottom-sm">
  103 + <view class="flex align-center margin-bottom-sm">
  104 + <view class="dot"></view>
  105 + <view class="txt-30-h text-bold">使用规则</view>
  106 + </view>
  107 + <view class="text-df" wx:if="{{hasShowRule}}">
  108 + <text style="line-height: 40rpx;">{{packs[activityId].use_notice}}</text>
  109 + </view>
  110 + <view class="flex justify-center align-center rule margin-top-sm margin-bottom-sm" bindtap="toggleRule">
  111 + <view class="txt-28-h">{{hasShowRule?'收起':'展开更多'}}</view>
  112 + <view class="view icon {{hasShowRule?'show':''}}"></view>
  113 + </view>
  114 + </view>
  115 + </view>
  116 + </view>
  117 + <view class="view bottom flex align-center justify-between padding-right">
  118 + <view class="view flex justify-center align-center flex-treble ">
  119 + <view class="view flex align-end">
  120 + <view class="text-orange txt-40-h" style="margin-bottom: 4rpx;">¥</view>
  121 + <view class="text-orange txt-52-h margin-right-sm text-bold">{{packs[activityId].sale_price}}</view>
  122 + </view>
  123 + <view class="view flex flex-direction justify-center align-start">
  124 + <view class="view flex text-orange align-center" wx:if="{{packs[activityId].discount>0}}">
  125 + <view class="view tag"></view>
  126 + <view class="view margin-left-xs txt-24-h">{{packs[activityId].discount*10}}折</view>
  127 + </view>
  128 + <view class="huaxian flex align-end">
  129 + <view class="txt-24-h" style="margin-bottom: 2rpx;">¥</view>
  130 + <view class="txt-32-h">{{packs[activityId].market_price}}</view>
  131 + </view>
  132 + </view>
  133 + </view>
  134 + <view class="flex justify-end" bindtap="createSale">
  135 + <view class="buyButton txt-36-h text-bold flex align-center justify-center bg-blue-blue">立即抢购</view>
  136 + </view>
  137 + </view>
  138 + </block>
  139 + <view wx:else=""
  140 + style="padding-top: 172rpx;"
  141 + class="flex flex-direction justify-start align-center">
  142 + <image src="http://nosqn.colorcun.com/taocan/1%20%2827%29.png"
  143 + style="width: 520rpx;height: 348rpx;"></image>
  144 + <view class="txt-28-h margin-top-lg">该套餐过期啦</view>
  145 + </view>
  146 + <share id="share" pack="{{packs[activityId]}}" wx:if="{{packs[activityId].id}}"></share>
  147 +</block>
  148 +
  149 +
  1 +/* pages/taocan/index.wxss */
  2 +@import "../../colorui/main.wxss";
  3 +.swiper-item{
  4 + display: inline-block;
  5 + margin-right: 80rpx;
  6 + min-width: 60rpx;
  7 +}
  8 +.swiper-item:last-child{
  9 + padding-right: 40rpx;
  10 +}
  11 +.swiper-item-txt{
  12 + position: relative;
  13 +}
  14 +.swiper-item.active .swiper-item-txt:after{
  15 + position: absolute;
  16 + bottom: -14rpx;
  17 + width: 60rpx;
  18 + height: 6rpx;
  19 + background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
  20 + border-radius: 3rpx;
  21 + content: "";
  22 + left:calc(50% - 30rpx);
  23 + display: block;
  24 + z-index: 9;
  25 +}
  26 +.swiper-item.active .txt-28-h{
  27 + font-weight: bold;
  28 +}
  29 +.box{
  30 + background: #FFFFFF;
  31 + box-shadow: 0px 0px 30rpx 0px #E5E5E5;
  32 + border-radius: 20rpx;
  33 +}
  34 +.huaxian{
  35 + position: relative;
  36 + color:#cccccc;
  37 +}
  38 +.huaxian:after{
  39 + position: absolute;
  40 + content: "";
  41 + width: 100%;
  42 + height: 2rpx;
  43 + background-color: #CCCCCC;
  44 + left:0rpx;
  45 + top:20rpx;
  46 +}
  47 +.tag{
  48 + width: 22rpx;
  49 + height: 22rpx;
  50 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%281%29.png");
  51 +}
  52 +.labels .icon{
  53 + width: 24rpx;
  54 + height: 24rpx;
  55 + margin-right: 10rpx;
  56 +
  57 +}
  58 +.labels .icon1{
  59 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%287%29.png");
  60 +}
  61 +.labels .icon2{
  62 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%288%29.png");
  63 +}
  64 +.labels .icon3{
  65 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%289%29.png");
  66 +}
  67 +.block .dot{
  68 + width: 8rpx;
  69 + height: 26rpx;
  70 + background: linear-gradient(180deg, #3BBFF5 0%, #57A0FF 100%);
  71 + margin-right: 20rpx;
  72 +}
  73 +.rule .icon{
  74 + width: 22rpx;
  75 + height: 12rpx;
  76 + margin-left: 20rpx;
  77 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%285%29.png");
  78 +}
  79 +.rule .icon.show{
  80 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%286%29.png");
  81 +}
  82 +.header{
  83 + position: fixed;
  84 + width: 100%;
  85 + background-color: #fefefe;
  86 + z-index: 9;
  87 +}
  88 +.bottom{
  89 + position: fixed;
  90 + bottom: 0;
  91 + height: 116rpx;
  92 + width: 100%;
  93 + background: #FFFFFF;
  94 + box-shadow: 0px 0px 8rpx 0px #EEF0F2;
  95 +}
  96 +.buyButton{
  97 + width: 310rpx;
  98 + height: 84rpx;
  99 + background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
  100 + border-radius: 42rpx;
  101 +
  102 +}
  103 +.share{
  104 + position: fixed;
  105 + width: 63px;
  106 + height: 64rpx;
  107 + background: rgba(255, 255, 255, 0.6);
  108 + border-radius: 32rpx;
  109 + border: 1rpx solid rgba(151, 151, 151, 0.2);
  110 +}
  111 +.share .icon{
  112 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%2828%29.png");
  113 + width: 24rpx;
  114 + height: 24rpx;
  115 +}
  116 +.share .text{
  117 + height: 36rpx;
  118 + font-size: 26rpx;
  119 + font-family: PingFangSC-Regular, PingFang SC;
  120 + font-weight: 400;
  121 + color: #333333;
  122 + line-height: 36rpx;
  123 +}
  124 +.reflush{
  125 + width: 152rpx;
  126 + height: 56rpx;
  127 + background: #42A5FF;
  128 + border-radius: 28rpx;
  129 +
  130 + font-size: 28rpx;
  131 + font-family: PingFangSC-Regular, PingFang SC;
  132 + font-weight: 400;
  133 + color: #FFFFFF;
  134 + line-height: 40rpx;
  135 +}