xt / xcx-book · Commits

Go to a project

Commit fc9d7ecd57cb645ae78b88664225a7dcac5dc7ea

Authored by pengye
1 parent 5e873a6b
build: skipped

商家店铺首页页面（挂机短信跳转）

Inline Side-by-side
Showing 4 changed files with 474 additions and 0 deletions
  1 +// pages/reserve/shopHome.js
  2 +import App from '../../utils/api';
  3 +import util from '../../utils/util';
  4 +Page({
  5 +
  6 + /**
  7 + * 页面的初始数据
  8 + */
  9 + data: {
  10 + seller: {
  11 + imgUrl: '',
  12 + sellName: '',
  13 + date: '',
  14 + phone: '',
  15 + address: '',
  16 + name: '',
  17 + lat: '',
  18 + long: '',
  19 + },
  20 + store: {},
  21 + chef: {},
  22 + signboard: {},
  23 + home: {},
  24 + sid: '',
  25 + IsCollectionSeller: false,
  26 + },
  27 +
  28 + /**
  29 + * 生命周期函数--监听页面加载
  30 + */
  31 + onLoad(options) {
  32 + if (options.sid) {
  33 + this.setData({
  34 + sid: options.sid
  35 + })
  36 + this.getDetail(options.sid)
  37 + this.getIsCollectionSellerFun(options.sid)
  38 + }
  39 + },
  40 + // 获取商家是否收藏状态
  41 + getIsCollectionSellerFun(sid) {
  42 + App.Customer.IsCollectionSeller({
  43 + sid,
  44 + openid: getApp().openid
  45 + }).then(res => {
  46 + this.setData({
  47 + IsCollectionSeller: res.data,
  48 + })
  49 + })
  50 + },
  51 + // 获取店铺详情
  52 + getDetail(sid) {
  53 + App.Customer.GetSellerDetail({
  54 + openid: getApp().openid,
  55 + sid
  56 + }).then(res => {
  57 + let reserev = res.data;
  58 + this.setData({
  59 + seller: {
  60 + sellName: reserev.sellername,
  61 + date: reserev.daily.morning + ' ' + reserev.daily.night + ' ' + reserev.daily.noon,
  62 + phone: reserev.phone,
  63 + address: reserev.map_address,
  64 + lat: reserev.lat,
  65 + long: reserev.long,
  66 + }
  67 + })
  68 + console.log('sellerseller', {
  69 + ...this.data.seller
  70 + });
  71 + setTimeout(() => {
  72 + this.getSellerTemplateConfFun(reserev.id);
  73 + }, 0);
  74 + }).catch(res => {
  75 + console.log(res, '详情请求失败');
  76 + })
  77 + },
  78 + // 获取商家设置营销信息
  79 + getSellerTemplateConfFun(sid) {
  80 + App.Seller.GetSellerTemplateConf({
  81 + sid
  82 + }).then(res => {
  83 + let data = res.data
  84 + let home, chef, signboard, store;
  85 + chef = util.determine(data.chef);
  86 + signboard = util.determine(data.signboard);
  87 + store = util.determine(data.store);
  88 + home = util.determine(data.home);
  89 + if (store && store.images.length > 0) store.images = util.determine(store.images);
  90 + if (signboard && signboard.images) signboard.images = util.determine(signboard.images);
  91 + let obj = {
  92 + chef,
  93 + signboard,
  94 + store,
  95 + home,
  96 + }
  97 + console.log('获取数据', {
  98 + ...obj
  99 + });
  100 + this.setData({
  101 + chef,
  102 + signboard,
  103 + store,
  104 + home,
  105 + })
  106 + }).catch(res => {
  107 + console.log('GetSellerTemplateConf请求失败');
  108 + })
  109 + },
  110 + // 导航
  111 + looklocation: function () {
  112 + wx.reportMonitor('1015', 1)
  113 + wx.openLocation({
  114 + latitude: Number(this.data.seller.lat),
  115 + longitude: Number(this.data.seller.long),
  116 + scale: 17,
  117 + address: this.data.seller.address,
  118 + success: function (res) {
  119 + console.log(res)
  120 + }
  121 + })
  122 + },
  123 + // 点击收藏按钮
  124 + follow() {
  125 + let param = {
  126 + sid: this.data.sid,
  127 + openid: getApp().openid,
  128 + }
  129 + if (this.data.IsCollectionSeller) { //已收藏
  130 + param.cancel = 1
  131 + }
  132 + let hasFollow = !this.data.IsCollectionSeller
  133 + App.Customer.SetCollectionRel(param).then(res => {
  134 + if (res.ret == 200) {
  135 + util.toast('设置成功', 'none')
  136 + this.setData({
  137 + IsCollectionSeller: hasFollow
  138 + })
  139 + }
  140 + })
  141 + },
  142 + // 分享
  143 + sharesetting() {
  144 + wx.reportMonitor('1017', 1)
  145 + let parmdata = {
  146 + sid: this.data.sid,
  147 + fromid: getApp().openid
  148 + }
  149 + return {
  150 + title: '向您推荐' + this.data.seller.sellName + '，快来看看吧！',
  151 + path: util.http_build_query(parmdata, '/pages/reserve/shopHome'),
  152 + imageUrl: this.data.home.image || 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png',
  153 + }
  154 + },
  155 + // 拨打电话
  156 + call() {
  157 + wx.reportMonitor('1012', 1)
  158 + wx.makePhoneCall({
  159 + phoneNumber: this.data.seller.phone
  160 + })
  161 + },
  162 + /**
  163 + * 生命周期函数--监听页面初次渲染完成
  164 + */
  165 + onReady() {
  166 +
  167 + },
  168 +
  169 + /**
  170 + * 生命周期函数--监听页面显示
  171 + */
  172 + onShow() {
  173 +
  174 + },
  175 +
  176 + /**
  177 + * 生命周期函数--监听页面隐藏
  178 + */
  179 + onHide() {
  180 +
  181 + },
  182 +
  183 + /**
  184 + * 生命周期函数--监听页面卸载
  185 + */
  186 + onUnload() {
  187 +
  188 + },
  189 +
  190 + /**
  191 + * 页面相关事件处理函数--监听用户下拉动作
  192 + */
  193 + onPullDownRefresh() {
  194 +
  195 + },
  196 +
  197 + /**
  198 + * 页面上拉触底事件的处理函数
  199 + */
  200 + onReachBottom() {
  201 +
  202 + },
  203 + /**
  204 + * 用户点击右上角分享
  205 + */
  206 + onShareAppMessage() {
  207 + return this.sharesetting();
  208 + },
  209 + /**
  210 + * 监听用户点击分享到朋友圈按钮的操作
  211 + */
  212 + onShareTimeline() {
  213 + return this.sharesetting();
  214 + },
  215 +})
  1 +{
  2 + "navigationBarBackgroundColor": "#ffffff",
  3 + "navigationBarTextStyle": "white",
  4 + "navigationBarTitleText": "",
  5 + "usingComponents": {
  6 + "nav": "/components/nav/nav"
  7 + }
  8 +}
  1 +<!--pages/reserve/shopHome.wxml-->
  2 +<nav hasHome class="navhome" backgroundColor="#0143a3" color="#fff" place="{{true}}">{{seller.sellName}}</nav>
  3 +<view>
  4 + <view class="sellBox flex-vc">
  5 + <image wx:if="{{home.image}}" class="imgs" src="{{home.image}}" mode="scaleToFill" />
  6 + <view class="info flex-vl" style="background:#fff;">
  7 + <view class="flex-lr">
  8 + <view class="colorText font32r">{{seller.sellName}}</view>
  9 + <image bindtap="follow" wx:if="{{IsCollectionSeller}}" class="img1" src="https://qn.colorcun.com/heartFilledBlue.png" />
  10 + <image bindtap="follow" wx:else class="img1" src="https://qn.colorcun.com/heartBlue.png" />
  11 + </view>
  12 + <view class="colorFive text1 font28r">营业时间：{{seller.date}}</view>
  13 + <view class="colorFive text2 font28r" bindtap="call">
  14 + 电话：<text class="colorText">{{seller.phone}}</text>
  15 + </view>
  16 + <view class="colorFive font28r" bindtap="looklocation">
  17 + <text>地址：{{seller.address}}</text>
  18 + <image class="img2" src="https://qn.colorcun.com/address.png" />
  19 + </view>
  20 + </view>
  21 + </view>
  22 +
  23 + <!-- 餐厅介绍图文分开 -->
  24 + <view class="oneIntroduce introduce" wx:if="{{store}}">
  25 + <view class="imgMask">
  26 + <view class="IntroduceColor" wx:if="{{store.introduce && (!store.is_introduce || store.is_introduce!='0')}}">
  27 + <view class="chefText font36r">餐厅介绍</view>
  28 + <view class="lines"></view>
  29 + <view class="labelBox">
  30 + <text class="texts">{{store.introduce}}
  31 + </text>
  32 + </view>
  33 + </view>
  34 + <block wx:if="{{store.images.length>0 && (!store.is_images || store.is_images!='0')}}">
  35 + <block wx:for="{{store.images}}" wx:key="arryIndex" wx:for-index="arryIndex">
  36 + <image src="{{item}}" mode="aspectFill" />
  37 + </block>
  38 + </block>
  39 + </view>
  40 + </view>
  41 + <!-- 主厨介绍图文分开 -->
  42 + <view class="introduce famousChefBox" wx:if="{{chef && (!chef.is_introduce || chef.is_introduce!='0') || (!chef.is_images || chef.is_images!='0')}}">
  43 + <view class="imgMask">
  44 + <view class="IntroduceColor">
  45 + <view class="chefText font36r" wx:if="{{chef.is_introduce || chef.is_images}}">主厨介绍</view>
  46 + <view class="lines"></view>
  47 + <view class="labelBox" wx:if="{{!chef.is_introduce || chef.is_introduce!='0'}}">
  48 + <text class="texts">{{chef.introduce}}
  49 + </text>
  50 + </view>
  51 + </view>
  52 + <block wx:if="{{(!chef.is_images || chef.is_images!='0') && chef.image}}">
  53 + <image src="{{chef.image}}" mode="aspectFill" />
  54 + </block>
  55 + <view wx:if="{{chef.is_introduce || chef.is_images}}" class="{{(!chef.is_images || chef.is_images!='0')?'':'mtnone'}}"></view>
  56 + </view>
  57 + </view>
  58 + <!-- 菜品展示 swich为1展示 -->
  59 + <view class="introduce vegetableBox" wx:if="{{signboard && signboard.swich=='1'}}">
  60 + <view class="imgMask">
  61 + <view class="IntroduceColor">
  62 + <view class="chefText font36r">特色菜品</view>
  63 + <view class="lines"></view>
  64 + </view>
  65 + <block wx:for="{{signboard.images}}" wx:key="arryIndex" wx:for-index="arryIndex">
  66 + <image src="{{item}}" mode="aspectFill" />
  67 + </block>
  68 + </view>
  69 + </view>
  70 + <view class="all-button flex-lr between">
  71 + <navigator url="/pages/reserve/reserve?id={{sid}}&activeTab=reserve" class="book-item-font second-book-button flex-cc font30r" style="position: relative;">预订包间</navigator>
  72 + <button class="book-item-font flex-cc font30r shareItem" open-type="share">转发给朋友
  73 + </button>
  74 + </view>
  75 +</view>
  1 +/* pages/reserve/shopHome.wxss */
  2 +.imgs {
  3 + height: 562rpx;
  4 + width: 100%;
  5 +}
  6 +
  7 +.my_canvas {
  8 + position: relative;
  9 + padding-bottom: 200rpx;
  10 +}
  11 +
  12 +.sellBox {
  13 + width: 100%;
  14 + position: relative;
  15 +}
  16 +
  17 +.info {
  18 + width: 90%;
  19 + padding: 44rpx 26rpx 26rpx 20rpx;
  20 + position: absolute;
  21 + bottom: -30%;
  22 + box-sizing: border-box;
  23 + background: #fff;
  24 + background-color: #fff;
  25 + border-radius: 16rpx;
  26 + border: 2rpx solid #0143A3;
  27 +}
  28 +
  29 +.img1 {
  30 + width: 50rpx;
  31 + height: 50rpx;
  32 +}
  33 +
  34 +.img2 {
  35 + width: 30rpx;
  36 + height: 38rpx;
  37 + margin-left: 10rpx;
  38 + position: relative;
  39 + top: 8rpx;
  40 +}
  41 +
  42 +.colorText {
  43 + color: #0143A3;
  44 +}
  45 +
  46 +.text1 {
  47 + margin: 40rpx 0 10rpx 0;
  48 +}
  49 +
  50 +.text2 {
  51 + margin-bottom: 10rpx;
  52 +}
  53 +
  54 +.colorFive {
  55 + color: #515151;
  56 +}
  57 +
  58 +.introduce {
  59 + box-sizing: border-box;
  60 +}
  61 +
  62 +.imgMask {
  63 + margin: 0 40rpx;
  64 +}
  65 +
  66 +.lines {
  67 + height: 2rpx;
  68 + margin: 20rpx 20rpx 20rpx 0;
  69 + background-color: #0143A3;
  70 +}
  71 +
  72 +.mtnone {
  73 + margin-top: 0;
  74 +}
  75 +
  76 +.famousChefBox .labelBox {
  77 + border-bottom: none;
  78 +}
  79 +
  80 +.labelBox {
  81 + display: flex;
  82 + margin: 0 20rpx 0 0;
  83 + position: relative;
  84 + padding-bottom: 20rpx;
  85 +}
  86 +
  87 +.labelBox .texts {
  88 + width: 90%;
  89 + line-height: 40rpx;
  90 + color: #515151;
  91 + font-family: PingFang SC;
  92 + font-size: 28rpx;
  93 + max-height: 400rpx;
  94 + overflow: hidden;
  95 + white-space: pre-line;
  96 + word-wrap: break-word;
  97 + overflow: hidden;
  98 + word-break: break-all;
  99 + text-overflow: ellipsis;
  100 + display: -webkit-box;
  101 + -webkit-box-orient: vertical;
  102 + -webkit-line-clamp: 10;
  103 + font-weight: 500;
  104 +}
  105 +
  106 +.labelBox .line1 {
  107 + margin: 0 0 0 16rpx;
  108 +}
  109 +
  110 +.imgMask image {
  111 + width: 100%;
  112 + display: block;
  113 + margin-bottom: 20rpx;
  114 +}
  115 +
  116 +.famousChefBox,
  117 +.vegetableBox {
  118 + position: relative;
  119 + margin-top: 20rpx;
  120 +}
  121 +
  122 +.vegetableBox .chefText {
  123 + margin-top: 0;
  124 +}
  125 +
  126 +.vegetableBox {
  127 + padding-bottom: 80px;
  128 +}
  129 +
  130 +.chefText {
  131 + font-family: PingFang SC;
  132 + margin: 20rpx 20rpx 20rpx 0;
  133 + font-weight: 500;
  134 + color: #0143A3;
  135 +}
  136 +
  137 +.oneIntroduce {
  138 + margin-top: 190rpx;
  139 +}
  140 +
  141 +.between {
  142 + justify-content: space-between;
  143 +}
  144 +
  145 +.all-button {
  146 + background: #FAFAFA;
  147 + height: 160rpx;
  148 + padding: 0 40rpx;
  149 + box-sizing: border-box;
  150 + z-index: 100;
  151 + justify-content: flex-end;
  152 + position: fixed;
  153 + left: 0;
  154 + bottom: 0;
  155 + width: 100%;
  156 +}
  157 +
  158 +.book-item-font {
  159 + width: 45%;
  160 + border: 2rpx solid #0143A3;
  161 + color: #0143A3;
  162 + height: 46%;
  163 + border-radius: 42rpx;
  164 + font-weight: 600;
  165 +}
  166 +
  167 +.second-book-button {
  168 + margin-right: 20rpx;
  169 +}
  170 +
  171 +.shareItem {
  172 + width: 100%;
  173 + margin: 0;
  174 + background: linear-gradient(104.24deg, #4c8dad -57.47%, #0143a3 55.72%, #42a5ff 148.72%);
  175 + color: #fff;
  176 +}