xt / xcx-book · Commits

Go to a project

Commit a567edbf4bd119627e5e0c7135e60b98c9242ffe

Authored by vking
1 parent 0fc19042
build: skipped

taocan-share

Inline Side-by-side
Showing 8 changed files with 217 additions and 4 deletions
// components/reserve/share/share.js
import util from '../../../utils/util';
Component({
/**
* 组件的属性列表
*/
properties: {
seller_id:String,
hasSellerShare:{
type:Boolean,
value:false,
},
seller:{
type:Object,
value:{},
},
},
/**
* 组件的初始数据
*/
data: {
hasShow:false,
product:null,
},
attached: function () {
this.formatProduct()
},
/**
* 组件的方法列表
*/
methods: {
show(){
this.setData({
hasShow:true,
})
},
hide(){
this.setData({
hasShow:false,
})
},
shareDo(e){
this.hide()
let act=util.attr(e,'act');
if(!act) return;
console.log('shareDo.'+act,e);
wx.navigateTo({
url:util.http_build_query({
id:this.data.seller_id,
act:act,
hasSellerShare:this.data.hasSellerShare
},'/pages/reserve/share')
})
},
formatProduct(){
let seller=this.data.seller
let product= {
item_code:seller.id+"",
title:seller.sellername,
desc:seller.slogan,
category_list:(seller.cate && seller.cate.length>0)?seller.cate:['餐厅','饭店','餐饮','订包间','周到安排'],
image_list:seller.envi_image,
src_mini_program_path:'/pages/reserve/detail?id='+seller.id+'&from=haowu',
brand_info:{
name:seller.sellername,
logo:seller.seller_image,
phone:seller.seller_tel,
},
sku_list:[],
}
this.setData({
product:product,
})
},
}
})
... ...
{
"component": true,
"usingComponents": {
"share-button": "plugin://haowu/share-button"
}
}
\ No newline at end of file
... ...
<!--components/reserve/share/share.wxml-->
<view class="share mask" catchtap="hide" wx:if="{{hasShow}}">
<view class="share-body" catchtap="catchtap">
<view class="share-view flex-lr">
<button class="button-none share-item flex-vc" open-type="share" catchtap="shareDo">
<image class="share-img wechat"></image>
<view class="share-name">微信</view>
</button>
<view class="share-item flex-vc" catchtap="shareDo" data-act="qrcode">
<image class="share-img qrcode"></image>
<view class="share-name">二维码</view>
</view>
</view>
<view class="clean" bindtap="hide">取消</view>
</view>
</view>
... ...
/* components/reserve/share/share.wxss */
@import "../../../app.wxss";
.share-body{
height: 260rpx;
width: calc(100% - 100rpx);
padding: 0 50rpx;
position: fixed;
bottom: 0;
height: 390rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0px 0px;
}
.share-view{
margin-top: 60rpx;
margin-bottom: 60rpx;
}
.share-img{
width: 100rpx;
height: 100rpx;
background-size: 100% 100%;
}
.share-img.wechat{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004331.png");
}
.share-img.quanzi{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190625100433.png");
}
.share-img.qrcode{
background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004332.png");
}
.share-img.hwq{
background-image: url("http://nosqn.colorcun.com/reserve/images/hwq.png");
}
.share-name{
margin-top: 20rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 40rpx;
}
.share-item{
min-width: 50%;
width: 50%;
}
.clean{
width: 100%;
height: 80rpx;
background: #F5F5F5;
border-radius: 40rpx;
font-size: 34rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 80rpx;
text-align: center;
}
\ No newline at end of file
... ...
... ... @@ -56,7 +56,15 @@ Page({
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
if(wx.getMenuButtonBoundingClientRect){
let rect=wx.getMenuButtonBoundingClientRect()
console.log('rect',rect);
this.setData({
shareTop:rect.top,
shareHeight:rect.height,
shareLeft:rect.left-68,
})
}
},
/**
... ... @@ -98,7 +106,17 @@ Page({
* 用户点击右上角分享
*/
onShareAppMessage: function () {
let pack=this.data.packs[this.activityId]
let path=util.http_build_query({sid:pack.sid,pid:this.activityId,fromid:getApp().openid},'/pages/taocan/index')
let shareParams={
title:pack.name||'请客订包间，就上周到安排',
path:path,
}
if(pack.main_url){
shareParams.imageUrl=pack.main_url+'?imageView2/2/w/450'
}
console.log('shareParams==>',shareParams)
return shareParams
},
getCurrent(id,packs){
let ps=Object.keys(packs)
... ... @@ -178,4 +196,7 @@ Page({
this.createSaleIng=false
})
},
share(){
this.selectComponent('#share').show()
},
})
\ No newline at end of file
... ...
... ... @@ -2,6 +2,7 @@
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"usingComponents": {
"nav":"/components/nav/nav"
"nav":"/components/nav/nav",
"share":"/components/2.0/taocan/share"
}
}
\ No newline at end of file
... ...
<!--pages/taocan/index.wxml-->
<wxs src="../../utils/util.wxs" module="util" />
<nav hasHome>套餐详情</nav>
<nav hasHome>
<view style="top:{{shareTop}}px;height:{{shareHeight}}px;left:{{shareLeft}}px;"
catchtap="share"
class="share view flex align-center justify-center bg-white round">
<view class="icon view"></view>
<view class="text margin-left-xs">分享</view>
</view>
</nav>
<!--
<swiper
display-multiple-items="3"
... ... @@ -124,4 +131,5 @@
style="width: 520rpx;height: 348rpx;"></image>
<view class="txt-28-h margin-top-lg">该套餐过期啦</view>
</view>
<share id="share" seller_id="{{seller.id}}" seller="{{seller}}"></share>
... ...
... ... @@ -99,4 +99,25 @@
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
border-radius: 42rpx;
}
.share{
position: fixed;
width: 63px;
height: 64rpx;
background: rgba(255, 255, 255, 0.6);
border-radius: 32rpx;
border: 1rpx solid rgba(151, 151, 151, 0.2);
}
.share .icon{
background-image: url("http://nosqn.colorcun.com/taocan/1%20%2828%29.png");
width: 24rpx;
height: 24rpx;
}
.share .text{
height: 36rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 36rpx;
}
\ No newline at end of file
... ...