Commit fc9d7ecd57cb645ae78b88664225a7dcac5dc7ea

Authored by pengye
1 parent 5e873a6b

商家店铺首页页面(挂机短信跳转)

// pages/reserve/shopHome.js
import App from '../../utils/api';
import util from '../../utils/util';
Page({
/**
* 页面的初始数据
*/
data: {
seller: {
imgUrl: '',
sellName: '',
date: '',
phone: '',
address: '',
name: '',
lat: '',
long: '',
},
store: {},
chef: {},
signboard: {},
home: {},
sid: '',
IsCollectionSeller: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if (options.sid) {
this.setData({
sid: options.sid
})
this.getDetail(options.sid)
this.getIsCollectionSellerFun(options.sid)
}
},
// 获取商家是否收藏状态
getIsCollectionSellerFun(sid) {
App.Customer.IsCollectionSeller({
sid,
openid: getApp().openid
}).then(res => {
this.setData({
IsCollectionSeller: res.data,
})
})
},
// 获取店铺详情
getDetail(sid) {
App.Customer.GetSellerDetail({
openid: getApp().openid,
sid
}).then(res => {
let reserev = res.data;
this.setData({
seller: {
sellName: reserev.sellername,
date: reserev.daily.morning + ' ' + reserev.daily.night + ' ' + reserev.daily.noon,
phone: reserev.phone,
address: reserev.map_address,
lat: reserev.lat,
long: reserev.long,
}
})
console.log('sellerseller', {
...this.data.seller
});
setTimeout(() => {
this.getSellerTemplateConfFun(reserev.id);
}, 0);
}).catch(res => {
console.log(res, '详情请求失败');
})
},
// 获取商家设置营销信息
getSellerTemplateConfFun(sid) {
App.Seller.GetSellerTemplateConf({
sid
}).then(res => {
let data = res.data
let home, chef, signboard, store;
chef = util.determine(data.chef);
signboard = util.determine(data.signboard);
store = util.determine(data.store);
home = util.determine(data.home);
if (store && store.images.length > 0) store.images = util.determine(store.images);
if (signboard && signboard.images) signboard.images = util.determine(signboard.images);
let obj = {
chef,
signboard,
store,
home,
}
console.log('获取数据', {
...obj
});
this.setData({
chef,
signboard,
store,
home,
})
}).catch(res => {
console.log('GetSellerTemplateConf请求失败');
})
},
// 导航
looklocation: function () {
wx.reportMonitor('1015', 1)
wx.openLocation({
latitude: Number(this.data.seller.lat),
longitude: Number(this.data.seller.long),
scale: 17,
address: this.data.seller.address,
success: function (res) {
console.log(res)
}
})
},
// 点击收藏按钮
follow() {
let param = {
sid: this.data.sid,
openid: getApp().openid,
}
if (this.data.IsCollectionSeller) { //已收藏
param.cancel = 1
}
let hasFollow = !this.data.IsCollectionSeller
App.Customer.SetCollectionRel(param).then(res => {
if (res.ret == 200) {
util.toast('设置成功', 'none')
this.setData({
IsCollectionSeller: hasFollow
})
}
})
},
// 分享
sharesetting() {
wx.reportMonitor('1017', 1)
let parmdata = {
sid: this.data.sid,
fromid: getApp().openid
}
return {
title: '向您推荐' + this.data.seller.sellName + ',快来看看吧!',
path: util.http_build_query(parmdata, '/pages/reserve/shopHome'),
imageUrl: this.data.home.image || 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png',
}
},
// 拨打电话
call() {
wx.reportMonitor('1012', 1)
wx.makePhoneCall({
phoneNumber: this.data.seller.phone
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return this.sharesetting();
},
/**
* 监听用户点击分享到朋友圈按钮的操作
*/
onShareTimeline() {
return this.sharesetting();
},
})
\ No newline at end of file
... ...
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"usingComponents": {
"nav": "/components/nav/nav"
}
}
\ No newline at end of file
... ...
<!--pages/reserve/shopHome.wxml-->
<nav hasHome class="navhome" backgroundColor="#0143a3" color="#fff" place="{{true}}">{{seller.sellName}}</nav>
<view>
<view class="sellBox flex-vc">
<image wx:if="{{home.image}}" class="imgs" src="{{home.image}}" mode="scaleToFill" />
<view class="info flex-vl" style="background:#fff;">
<view class="flex-lr">
<view class="colorText font32r">{{seller.sellName}}</view>
<image bindtap="follow" wx:if="{{IsCollectionSeller}}" class="img1" src="https://qn.colorcun.com/heartFilledBlue.png" />
<image bindtap="follow" wx:else class="img1" src="https://qn.colorcun.com/heartBlue.png" />
</view>
<view class="colorFive text1 font28r">营业时间:{{seller.date}}</view>
<view class="colorFive text2 font28r" bindtap="call">
电话:<text class="colorText">{{seller.phone}}</text>
</view>
<view class="colorFive font28r" bindtap="looklocation">
<text>地址:{{seller.address}}</text>
<image class="img2" src="https://qn.colorcun.com/address.png" />
</view>
</view>
</view>
<!-- 餐厅介绍图文分开 -->
<view class="oneIntroduce introduce" wx:if="{{store}}">
<view class="imgMask">
<view class="IntroduceColor" wx:if="{{store.introduce && (!store.is_introduce || store.is_introduce!='0')}}">
<view class="chefText font36r">餐厅介绍</view>
<view class="lines"></view>
<view class="labelBox">
<text class="texts">{{store.introduce}}
</text>
</view>
</view>
<block wx:if="{{store.images.length>0 && (!store.is_images || store.is_images!='0')}}">
<block wx:for="{{store.images}}" wx:key="arryIndex" wx:for-index="arryIndex">
<image src="{{item}}" mode="aspectFill" />
</block>
</block>
</view>
</view>
<!-- 主厨介绍图文分开 -->
<view class="introduce famousChefBox" wx:if="{{chef && (!chef.is_introduce || chef.is_introduce!='0') || (!chef.is_images || chef.is_images!='0')}}">
<view class="imgMask">
<view class="IntroduceColor">
<view class="chefText font36r" wx:if="{{chef.is_introduce || chef.is_images}}">主厨介绍</view>
<view class="lines"></view>
<view class="labelBox" wx:if="{{!chef.is_introduce || chef.is_introduce!='0'}}">
<text class="texts">{{chef.introduce}}
</text>
</view>
</view>
<block wx:if="{{(!chef.is_images || chef.is_images!='0') && chef.image}}">
<image src="{{chef.image}}" mode="aspectFill" />
</block>
<view wx:if="{{chef.is_introduce || chef.is_images}}" class="{{(!chef.is_images || chef.is_images!='0')?'':'mtnone'}}"></view>
</view>
</view>
<!-- 菜品展示 swich为1展示 -->
<view class="introduce vegetableBox" wx:if="{{signboard && signboard.swich=='1'}}">
<view class="imgMask">
<view class="IntroduceColor">
<view class="chefText font36r">特色菜品</view>
<view class="lines"></view>
</view>
<block wx:for="{{signboard.images}}" wx:key="arryIndex" wx:for-index="arryIndex">
<image src="{{item}}" mode="aspectFill" />
</block>
</view>
</view>
<view class="all-button flex-lr between">
<navigator url="/pages/reserve/reserve?id={{sid}}&activeTab=reserve" class="book-item-font second-book-button flex-cc font30r" style="position: relative;">预订包间</navigator>
<button class="book-item-font flex-cc font30r shareItem" open-type="share">转发给朋友
</button>
</view>
</view>
\ No newline at end of file
... ...
/* pages/reserve/shopHome.wxss */
.imgs {
height: 562rpx;
width: 100%;
}
.my_canvas {
position: relative;
padding-bottom: 200rpx;
}
.sellBox {
width: 100%;
position: relative;
}
.info {
width: 90%;
padding: 44rpx 26rpx 26rpx 20rpx;
position: absolute;
bottom: -30%;
box-sizing: border-box;
background: #fff;
background-color: #fff;
border-radius: 16rpx;
border: 2rpx solid #0143A3;
}
.img1 {
width: 50rpx;
height: 50rpx;
}
.img2 {
width: 30rpx;
height: 38rpx;
margin-left: 10rpx;
position: relative;
top: 8rpx;
}
.colorText {
color: #0143A3;
}
.text1 {
margin: 40rpx 0 10rpx 0;
}
.text2 {
margin-bottom: 10rpx;
}
.colorFive {
color: #515151;
}
.introduce {
box-sizing: border-box;
}
.imgMask {
margin: 0 40rpx;
}
.lines {
height: 2rpx;
margin: 20rpx 20rpx 20rpx 0;
background-color: #0143A3;
}
.mtnone {
margin-top: 0;
}
.famousChefBox .labelBox {
border-bottom: none;
}
.labelBox {
display: flex;
margin: 0 20rpx 0 0;
position: relative;
padding-bottom: 20rpx;
}
.labelBox .texts {
width: 90%;
line-height: 40rpx;
color: #515151;
font-family: PingFang SC;
font-size: 28rpx;
max-height: 400rpx;
overflow: hidden;
white-space: pre-line;
word-wrap: break-word;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10;
font-weight: 500;
}
.labelBox .line1 {
margin: 0 0 0 16rpx;
}
.imgMask image {
width: 100%;
display: block;
margin-bottom: 20rpx;
}
.famousChefBox,
.vegetableBox {
position: relative;
margin-top: 20rpx;
}
.vegetableBox .chefText {
margin-top: 0;
}
.vegetableBox {
padding-bottom: 80px;
}
.chefText {
font-family: PingFang SC;
margin: 20rpx 20rpx 20rpx 0;
font-weight: 500;
color: #0143A3;
}
.oneIntroduce {
margin-top: 190rpx;
}
.between {
justify-content: space-between;
}
.all-button {
background: #FAFAFA;
height: 160rpx;
padding: 0 40rpx;
box-sizing: border-box;
z-index: 100;
justify-content: flex-end;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.book-item-font {
width: 45%;
border: 2rpx solid #0143A3;
color: #0143A3;
height: 46%;
border-radius: 42rpx;
font-weight: 600;
}
.second-book-button {
margin-right: 20rpx;
}
.shareItem {
width: 100%;
margin: 0;
background: linear-gradient(104.24deg, #4c8dad -57.47%, #0143a3 55.72%, #42a5ff 148.72%);
color: #fff;
}
\ No newline at end of file
... ...