diff --git a/pages/index/detail/index.js b/pages/index/detail/index.js
deleted file mode 100644
index 2424ee5..0000000
--- a/pages/index/detail/index.js
+++ /dev/null
@@ -1,465 +0,0 @@
-const Http = require("../../../utils/HttpBasics");
-const imgurl = require("../../../utils/imgurl");
-const config = require("../../../config/config");
-let app = getApp();
-Page({
-
- /**
- * 页面的初始数据
- */
- data: {
- teljpgUrl: imgurl.teljpg.url,
- share01: imgurl.share01.url,
- actUrl: imgurl.act.url,
- poster:'./../../../assets/images/picture.png',
- page: 1,
- imglist:null,
- shopVoList:[],
- couponList:[],//活动劵列表
- data:{
- currentTab: 0,
- isshare:false,
- showpost: false,
- imgHeight: 0,
- },
- id:null,
- windowWidth: 0,
- windowHeight: 0,
- totalHeight: 0,
- canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
- },
- /**
- * 分享海报的生成
- */
- //关闭海报
- closePoste: function() {
- this.setData({
- showpost: false
- })
- },
-
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- let that=this;
- if (options && options.id){
- this.setData({
- id: options.id
- });
- that.getList(options.id);
- that.getCouponList(options.id);
- this.setData({
- currentTab: 0
- })
- }
- // 获取到屏幕的宽高等信息
- wx.getSystemInfo({
- success: function(res) {
- that.setData({
- windowWidth: res.windowWidth,
- windowHeight: res.windowHeight
- })
- }
- })
- },
- /**
- * 绘制分享海报
- */
- begainDrawShareImage() {
- var that = this
- // 适配屏幕
- let scale = this.data.windowWidth / 375.0
-
- this.setData({ totalHeight: 767* scale})
- // 获取Canvas
- let ctx = wx.createCanvasContext('myCanvas')
-
- // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
- ctx.scale(this.data.canvasScale, this.data.canvasScale)
-
- // 绘制主背景白色
- ctx.setFillStyle('#ffffff')
- ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
- ctx.draw()
-
- // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
- let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int
- let topImageHeight = parseInt(250 * scale)
- let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
- wx.getImageInfo({
- src: src1,
- success: function(res) {
- ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
- // 覆盖黑色蒙层
- ctx.setFillStyle('rgba(0,0,0,0.3)')
- ctx.fillRect(0, 0, topImageWidth, topImageHeight)
-
- ctx.draw(true)
-
- that.drawOtherContent(ctx, scale)
- that.drawOtherImage(ctx,scale)
- }
- })
- },
-
- // 绘制除了图片之外的剩余内容
- drawOtherContent(ctx, scale) {
-
- // 绘制中间的灰色背景
- ctx.setFillStyle('rgba(246,246,246,1)')
- //(x轴,y轴,宽,高)
- ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale)
-
- //name
- ctx.setFillStyle('white');
- ctx.setFontSize(30 * scale);
- this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 200 * scale, 30 * scale, 258 * scale, 1)
- // address
- ctx.setFillStyle('#000');
- ctx.setFontSize(18 * scale);
- this.canvasTextAutoLine("地址:"+this.data.data.shopVoList[0].floorName+this.data.data.shopVoList[0].buildingName+this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 270 * scale, 22 * scale, 305 * scale, 1)
-
- // this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale);
- // this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale);
- // this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale);
-
- ctx.draw(true)
-
- },
-
- // 绘制活动图片
- drawOtherImage(ctx, scale) {
-
- let that = this
- // 如果该商户有活动商品
- if(this.data.couponList.length>0){
- let cotentImageWidth = parseInt(136 * scale)
- let cotentImageHeight = parseInt(136 * scale)
- for (let i = 0; i < this.data.couponList.length; i++){
- let imageItem = this.data.couponList[i].coverImg
- let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
- wx.getImageInfo({
- src: src1,
- success: function (res) {
- ctx.drawImage(res.path, 15 * scale + i*180*scale, 300 * scale, cotentImageWidth, cotentImageHeight)
- ctx.draw(true)
- }
- })
- }
- //没有活动商品生成小程序码
- }else{
- if(this.data.qrCode){
- let coImageWidth = parseInt(336 * scale)
- let coImageHeight = parseInt(336 * scale)
- let src1 = this.data.qrCode + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
- wx.getImageInfo({
- src: src1,
- success: function(res) {
- ctx.drawImage(res.path, 0, 0, coImageWidth, coImageHeight)
- ctx.draw(true)
- }
- })
- }
- }
- // icon
- // ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)')
- // ctx.drawImage('./../../../assets/images/download.png', 13 * scale, 590 * scale, 54*scale, 54*scale)
- // ctx.setShadow(0, 0, 0, 'white')
- // ctx.draw(true)
- },
-
- // 绘制只有一行的文字
- drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
- ctx.setFontSize(font);
- ctx.setFillStyle(style);
- ctx.setTextAlign(align);
- ctx.setTextBaseline(baseLine);
- ctx.fillText(str, x, y);
- },
-
-
- /*
- * 绘制多行文本,自动换行,超出添加...
- *
- str:要绘制的字符串
- canvas:canvas对象
- initX:绘制字符串起始x坐标
- initY:绘制字符串起始y坐标
- lineHeight:字行高,自己定义个值即可
- maxWidth: 文本最大宽度
- row: 最大行数
- */
- canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
- var lineWidth = 0;
- var lastSubStrIndex = 0;
- var currentRow = 1;
- for (let i = 0; i < str.length; i++) {
- lineWidth += ctx.measureText(str[i]).width;
- if (lineWidth > maxWidth) {
- currentRow++;
- let newStr = str.substring(lastSubStrIndex, i)
- if (currentRow > row && str.length > i) {
- newStr = str.substring(lastSubStrIndex, i - 2) + '...'
- }
- ctx.fillText(newStr, initX, initY);
- initY += lineHeight;
- lineWidth = 0;
- lastSubStrIndex = i;
-
- if (currentRow > row) {
- break;
- }
- }
- if (i == str.length - 1) {
- ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
- }
- }
- },
- // 保存图片
- saveImage() {
- var _this = this
- var image = _this.data.poster
-
- wx.getImageInfo({
- src: image,
- success: function (sres) {
- var imgSrc = sres.path;
-
- wx.showLoading({
- title: '保存中',
- mask: true
- })
- setTimeout(function () {
- wx.saveImageToPhotosAlbum({
- filePath: imgSrc,
- success: function (data) {
- // wx.showToast({
- // title: '保存成功',
- // icon: 'success',
- // duration: 2000
- // })
- console.log(data)
- wx.showModal({
- title: '友情提示',
- content: '图片保存成功,请到相册查找分享',
- success(res) {
- if (res.confirm) {
-
- } else if (res.cancel) {
-
- }
- }
- })
-
- },
- fail: function (err) {
- // console.log(err);
- if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
- console.log("当初用户拒绝,再次发起授权")
- wx.openSetting({
- success(settingdata) {
- console.log(settingdata)
- if (settingdata.authSetting['scope.writePhotosAlbum']) {
- console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
- } else {
- console.log('获取权限失败,给出不给权限就无法正常使用的提示')
- }
- }
- })
- }
- },
- complete(res) {
- console.log(res);
- }
- })
- wx.hideLoading();
- }, 2000)
-
-
-
-
-
-
- }
-
- })
-
- },
- /**
- * 获取access_token
- */
- getaccess_token:function(access_token){
- wx.request({
- url:"https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,
- method: 'POST',
- data: {
- path: 'pages/index/index', // 必须是已经发布的小程序存在的页面(否则报错)
- width: 430,
- auto_color: false,// 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调
- line_color: {"r":"0","g":"0","b":"0"} // auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
- },
- success:function(res){
- console.log(res);
- }
- })
- },
- /**
- * 拨打电话
- */
- phone: function (e) {
- let that = this;
- wx.makePhoneCall({
- phoneNumber: e.target.dataset.merchantlinkphone
- });
- },
- /**
- * 显示分享弹框
- */
- showshare:function(){
- this.setData({
- isshare:true,
- })
- },
- /**
- * 隐藏分享弹框
- */
- hidemodal:function(){
- this.setData({
- isshare: false,
- })
- },
- //滑动切换
- swiperTabView: function (e) {
- this.setData({
- currentTab: e.detail.current
- });
- },
- /**
- * 隐藏分享海报
- */
- hideposter:function(){
- this.setData({
- showpost: false,
- })
- },
- /**
- * 显示分享海报
- */
- showPoster:function(){
- this.setData({
- showpost: true,
- })
- this.begainDrawShareImage();
- },
- //点击切换
- clickTab: function (e) {
- if (this.data.currentTab === e.target.dataset.current) {
- return false;
- } else {
- this.setData({
- currentTab: e.target.dataset.current
- })
- }
- },
- /**
- * 获取商户详情
- */
- getList: function (id) {
- let that = this;
- let data;
- data = {
- pageNum: that.data.page,
- pageSize: 15,
- id:id
- }
- Http.get({
- url: config.api.merchantList,
- data: data
- }).then(res => {
- that.setData({
- data: res.data.list[0],
- shopVoList: res.data.list[0].shopVoList,
- imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl,
- })
- })
- .catch(err => {
- wx.showToast({
- title: err.errMsg,
- icon: 'none',
- duration: 2000,
- mask: false
- });
- })
- },
- /**
- * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡)
- * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题)
- */
- getCouponList: function (id) {
- let that = this;
- let data;
- data = {
- status:0,
- merchantId:id,
- pageNum: that.data.page,
- pageSize: 15,
- }
- Http.get({
- url: config.api.merchantCouponList,
- data: data
- }).then(res => {
- that.setData({
- couponList: res.data.list,
- })
- })
- .catch(err => {
- wx.showToast({
- title: err.errMsg,
- icon: 'none',
- duration: 2000,
- mask: false
- });
- })
- },
- /**
- * 获取多商铺列表
- */
- shopList:function(e){
- wx.navigateTo({
- url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}`
- })
- },
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
-
- },
- onShareAppMessage: function (res) {
- var that = this;
- var shareObj = {
- title: that.data.data.title,
- path: `/pages/index/index?couponChannelId=${that.data.couponChannelId}`,
- success: function (res) {
- if (res.errMsg == 'shareAppMessage:ok') { }
- },
- fail: function (error) {
- if (res.errMsg == 'shareAppMessage:fail cancel') { } else if (res.errMsg == 'shareAppMessage:fail') { }
- }
- };
- // 来自页面内的按钮的转发
- if (res.from === 'button') {
- var eData = res.target.dataset.id;
- shareObj.path = `/pages/index/index?couponChannelId=${eData}`;
- }
- // 返回shareObj
- return shareObj;
- },
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
-
- },
-})
\ No newline at end of file
diff --git a/pages/index/detail/index.json b/pages/index/detail/index.json
deleted file mode 100644
index 92dce2e..0000000
--- a/pages/index/detail/index.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "navigationBarTitleText": "商户详情",
- "backgroundColor": "#f4f4f4",
- "enablePullDownRefresh": true,
- "usingComponents": {
- "c-banner": "../../../components/banner/index",
- "c-coupons": "../../../components/merchantcoupons/index"
- }
-}
\ No newline at end of file
diff --git a/pages/index/detail/index.wxml b/pages/index/detail/index.wxml
deleted file mode 100644
index 12258ab..0000000
--- a/pages/index/detail/index.wxml
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{data.merchantName}}
- {{data.title}}
-
-
-
-
-
-
-
-
-
-
- 商户位置
-
-
-
- {{item.buildingName}}{{item.floorName}}--{{item.shopNumber}}
-
-
-
-
-
-
-
- 联系商户
-
-
-
- {{data.merchantLinkPhone}}
-
-
-
-
-
-
-
-
- 优惠信息
-
-
- 商家简介
-
-
-
-
-
-
-
-
-
-
-
- 请您敬请期待
- 我们正在筹备一大波优惠活动
-
-
-
- {{content}}
-
- {{loadingtext}}
-
-
-
- {{data.summary}}
- {{"信息完善中,敬请期待。"}}
-
-
-
-
-
- {{data.summary}}
-
-
-
-
-
-
-
-
-
- 微信好友
-
-
-
- 生成海报
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/index/detail/index.wxss b/pages/index/detail/index.wxss
deleted file mode 100644
index b050b17..0000000
--- a/pages/index/detail/index.wxss
+++ /dev/null
@@ -1,308 +0,0 @@
-.index-slide, swiper-item
- .index-slide-image {
- display: block;
- width: 750rpx;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- height: 576rpx;
-}
-
-.index-slide-view .dots {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 20rpx;
- display: flex;
- justify-content: center;
-}
-
-.index-slide-view .dots .dot {
- margin: 0 8rpx;
- width: 12rpx;
- height: 12rpx;
- background: #b6b6b7;
- border-radius: 50%;
- transition: all 0.6s;
-}
-
-.index-slide-view .dots .dot.active {
- background: #02c0ff;
- width: 30rpx;
- height: 12rpx;
- border-radius: 10rpx;
- opacity: 1;
-}
-
-.bannerbg {
- width: 100%;
-}
-
-.bannerbg image {
- display: block;
- width: 100%;
-}
-
-.merchant-detail {
- width:92%;
- padding:30rpx 4% 0;
- background:#fff;
- border-top-left-radius:20rpx;
- border-top-right-radius:20rpx;
- margin-top:-25rpx;
-}
-
-.merchant-brand, .merchant-shop, .merchant-phone {
- width: 100%;
- display: flex;
- padding: 20rpx 0;
- background: #fff;
- border-bottom: 1rpx solid #efefef;
-}
-
-.merchant-brand view:nth-child(1) {
- width: 160rpx;
- border-radius: 16rpx;
- height: 160rpx;
-}
-
-.merchant-brand view:nth-child(1) image {
- display: block;
- width: 160rpx;
- height: 160rpx;
- border-radius: 16rpx;
- border: 1px solid #e5e5e5;
-}
-
-.merchant-brand view:nth-child(2) {
- display: flex;
- flex-direction: column;
- flex: 6;
- padding-left: 30rpx;
-}
-
-.merchant-brand view:nth-child(2) text:nth-child(1) {
- margin-top: 20rpx;
-}
-
-.merchant-shop text, .merchant-phone text {
- font-size: 30rpx;
-}
-
-.merchant-shop view, .merchant-phone view {
- display: flex;
- flex: 2;
- color: #333;
-}
-
-.merchant-shop view:nth-child(2){
- font-size: 30rpx;
-}
-
-.merchant-info {
- display: block!important;
- color: #999;
- font-size: 28rpx;
-}
-.merchant-phones{
- padding: 20rpx 0;
- display: block;
- font-size: 30rpx;
-}
-.tel {
- right: 0;
- top: 0;
- bottom: 0;
- margin: auto;
- width: 50rpx;
- height: 50rpx;
-}
-
-.shoplists {
- display: flex;
-}
-
-.shoplists text {
- flex: 2;
-}
-
-.godetail {
- color: #999;
- font-size: 30rpx;
- position: absolute;
- right: 10rpx;
-}
-.merchants text{
- display: block;
- text-align: left;
- font-size:26rpx;
- margin-bottom: 6rpx;
-}
-.merchants{
- display: block!important;
-}
-.merchant-brand{
- border: none!important;
-}
-.tabs-item.selected {
- color:rgba(171,149,109,.8);
- border-bottom:2px solid rgba(171,149,109,.8);
-}
-.tabs-item {
- width:33.3%;
- color:#C7C7CB;
- font-size:28rpx;
- display:flex;
- align-items:center;
- justify-content:center;
- border-bottom:1rpx solid #D0D0D7;
-}
-.swiper-tab{
- text-align: left;
- width: 100%;
- display: flex;
- flex-flow: row;
- height: 88rpx;
- line-height: 88rpx;
- margin-bottom: 20rpx;
-}
-.swiper-tab-item {
- color: #434343;
- font-size: 30rpx;
- margin-right:50rpx;
-}
-.active-tab {
- color: #1693FC;
- border-bottom: 10rpx solid #1693FC;
-}
-.fenxiang {
- position: absolute;
- right: 0;
- top: 27rpx;
- width: 108rpx;
-}
-
-.fenxiang image {
- width: 108rpx;
- position: absolute;
- top: 0;
- right: 0;
-}
-.user-motto {
-width:270rpx;
-border:0;
-background:none;
-height:260rpx;
-color:#fff;
-position:fixed;
-}
-
-.user-motto::after {
- border: none;
-}
-/* 商户活动列表 */
-.coupons c-coupons{
- width: 335rpx;
- height: 354rpx;
- margin-bottom: 22rpx;
-}
-.coupons c-coupons:nth-of-type(2n+1){
- float: left;
-}
-.coupons c-coupons:nth-of-type(2n){
- float: right;
-}
-.loading image {
- width: 60rpx;
- height: 60rpx;
- vertical-align: middle;
- margin-right: 10rpx;
-}
-.dingdan text{
- display: block;
- text-align: center;
-}
-.swiperactive{
- min-height: 300rpx;
- margin-bottom:20rpx;
-}
-/* modal */
-.modal{
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0,0,0,0.5);
- overflow: hidden;
- z-index: 10;
- color: #fff;
-}
-.modal-content{
- width: 540rpx;
- height: 260rpx;
- line-height: 60rpx;
- overflow: hidden;
- position: fixed;
- top: 50%;
- left: 0;
- z-index: 11;
- background: #f9f9f9;
- margin: -130rpx 105rpx;
- border-radius: 36rpx;
- display: flex;
-}
-.modal-content view{
- display: inline-block;
- flex: 1;
- text-align: center;
-}
-.modal-content view>text{
- color: #000;
- display: block;
- height: 80rpx;
- line-height: 80rpx;
-}
-.modal-content view>image{
- margin-top: 30rpx;
- width: 100rpx;
- height: 100rpx;
-}
-/*分享海报样式*/
-.canvas-content{
- display: flex;
- top: 0;
- left: 0;
- /* left: 500%; 分享图不显示在页面上面,就将画布设置在页面之外*/
-}
-
-.save-button {
- position: fixed;
- width: 80rpx;
- height: 80rpx;
- bottom: 40rpx;
- right: 40rpx;
- border-radius: 50rpx;
- z-index: 200;
- background: rgba(0, 0, 0, 0.75);
-}
-
-.save-button .share-image {
- position: absolute;
- top: 22rpx;
- left: 22rpx;
- width: 36rpx;
- height: 36rpx;
-}
-/*分享海报蒙层*/
-.postermodal{
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0,0,0,0.5);
- overflow: hidden;
- z-index: 50;
- color: #fff;
-}
\ No newline at end of file
diff --git a/pages/index/searchbar/detail/index.js b/pages/index/searchbar/detail/index.js
index 0630bfc..c24d299 100644
--- a/pages/index/searchbar/detail/index.js
+++ b/pages/index/searchbar/detail/index.js
@@ -10,20 +10,38 @@ Page({
data: {
teljpgUrl: imgurl.teljpg.url,
share01: imgurl.share01.url,
+ actUrl: imgurl.act.url,
+ poster: './../../../../assets/images/picture.png',
page: 1,
imglist: null,
shopVoList: [],
- couponList: [], //活动劵列表
+ couponList: [],//活动劵列表
data: {
- currentTab: 0
+ currentTab: 0,
+ isshare: false,
+ showpost: false,
+ imgHeight: 0,
},
- id: null
+ id: null,
+ windowWidth: 0,
+ windowHeight: 0,
+ totalHeight: 0,
+ canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
+ },
+ /**
+ * 分享海报的生成
+ */
+ //关闭海报
+ closePoste: function () {
+ this.setData({
+ showpost: false
+ })
},
/**
* 生命周期函数--监听页面加载
*/
- onLoad: function(options) {
+ onLoad: function (options) {
let that = this;
if (options && options.id) {
this.setData({
@@ -31,21 +49,323 @@ Page({
});
that.getList(options.id);
that.getCouponList(options.id);
+ this.setData({
+ currentTab: 0
+ })
}
+ // 获取到屏幕的宽高等信息
+ wx.getSystemInfo({
+ success: function (res) {
+ that.setData({
+ windowWidth: res.windowWidth,
+ windowHeight: res.windowHeight
+ })
+ }
+ })
},
/**
- * 拨打电话
+ * 绘制分享海报
*/
- phone: function(e) {
+ begainDrawShareImage() {
+ var that = this
+ // 适配屏幕
+ let scale = this.data.windowWidth / 375.0
+
+ this.setData({ totalHeight: 767 * scale })
+ // 获取Canvas
+ let ctx = wx.createCanvasContext('myCanvas')
+
+ // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
+ ctx.scale(this.data.canvasScale, this.data.canvasScale)
+
+ // 绘制主背景白色
+ ctx.setFillStyle('#ffffff')
+ ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
+ ctx.draw()
+
+ // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
+ let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int
+ let topImageHeight = parseInt(250 * scale)
+ let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
+ wx.getImageInfo({
+ src: src1,
+ success: function (res) {
+ ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
+ // 覆盖黑色蒙层
+ ctx.setFillStyle('rgba(0,0,0,0.3)')
+ ctx.fillRect(0, 0, topImageWidth, topImageHeight)
+
+ ctx.draw(true)
+
+ that.drawOtherContent(ctx, scale)
+ that.drawOtherImage(ctx, scale)
+ }
+ })
+ },
+
+ // 绘制除了图片之外的剩余内容
+ drawOtherContent(ctx, scale) {
+
+ // 绘制中间的灰色背景
+ ctx.setFillStyle('rgba(246,246,246,1)')
+ //(x轴,y轴,宽,高)
+ ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale)
+
+ //name
+ ctx.setFillStyle('white');
+ ctx.setFontSize(30 * scale);
+ this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 200 * scale, 30 * scale, 258 * scale, 1)
+ // address
+ ctx.setFillStyle('#000');
+ ctx.setFontSize(18 * scale);
+ this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 270 * scale, 22 * scale, 305 * scale, 1)
+
+ // this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale);
+ // this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale);
+ // this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale);
+
+ ctx.draw(true)
+
+ },
+
+ // 绘制活动图片
+ drawOtherImage(ctx, scale) {
+
+ let that = this
+ // 如果该商户有活动商品
+ if (this.data.couponList.length > 0) {
+ let cotentImageWidth = parseInt(136 * scale)
+ let cotentImageHeight = parseInt(136 * scale)
+ for (let i = 0; i < this.data.couponList.length; i++) {
+ let imageItem = this.data.couponList[i].coverImg
+ let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
+ wx.getImageInfo({
+ src: src1,
+ success: function (res) {
+ ctx.drawImage(res.path, 15 * scale + i * 180 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
+ ctx.draw(true)
+ }
+ })
+ }
+ //没有活动商品生成小程序码
+ } else {
+ if (this.data.qrCode) {
+ let coImageWidth = parseInt(336 * scale)
+ let coImageHeight = parseInt(336 * scale)
+ let src1 = this.data.qrCode + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
+ wx.getImageInfo({
+ src: src1,
+ success: function (res) {
+ ctx.drawImage(res.path, 0, 0, coImageWidth, coImageHeight)
+ ctx.draw(true)
+ }
+ })
+ }
+ }
+ // icon
+ // ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)')
+ // ctx.drawImage('./../../../assets/images/download.png', 13 * scale, 590 * scale, 54*scale, 54*scale)
+ // ctx.setShadow(0, 0, 0, 'white')
+ // ctx.draw(true)
+ },
+
+ // 绘制只有一行的文字
+ drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
+ ctx.setFontSize(font);
+ ctx.setFillStyle(style);
+ ctx.setTextAlign(align);
+ ctx.setTextBaseline(baseLine);
+ ctx.fillText(str, x, y);
+ },
+
+
+ /*
+ * 绘制多行文本,自动换行,超出添加...
+ *
+ str:要绘制的字符串
+ canvas:canvas对象
+ initX:绘制字符串起始x坐标
+ initY:绘制字符串起始y坐标
+ lineHeight:字行高,自己定义个值即可
+ maxWidth: 文本最大宽度
+ row: 最大行数
+ */
+ canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
+ var lineWidth = 0;
+ var lastSubStrIndex = 0;
+ var currentRow = 1;
+ for (let i = 0; i < str.length; i++) {
+ lineWidth += ctx.measureText(str[i]).width;
+ if (lineWidth > maxWidth) {
+ currentRow++;
+ let newStr = str.substring(lastSubStrIndex, i)
+ if (currentRow > row && str.length > i) {
+ newStr = str.substring(lastSubStrIndex, i - 2) + '...'
+ }
+ ctx.fillText(newStr, initX, initY);
+ initY += lineHeight;
+ lineWidth = 0;
+ lastSubStrIndex = i;
+
+ if (currentRow > row) {
+ break;
+ }
+ }
+ if (i == str.length - 1) {
+ ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
+ }
+ }
+ },
+ // 保存图片
+ saveImage() {
+ var _this = this
+ var image = _this.data.poster
+
+ wx.getImageInfo({
+ src: image,
+ success: function (sres) {
+ var imgSrc = sres.path;
+
+ wx.showLoading({
+ title: '保存中',
+ mask: true
+ })
+ setTimeout(function () {
+ wx.saveImageToPhotosAlbum({
+ filePath: imgSrc,
+ success: function (data) {
+ // wx.showToast({
+ // title: '保存成功',
+ // icon: 'success',
+ // duration: 2000
+ // })
+ console.log(data)
+ wx.showModal({
+ title: '友情提示',
+ content: '图片保存成功,请到相册查找分享',
+ success(res) {
+ if (res.confirm) {
+
+ } else if (res.cancel) {
+
+ }
+ }
+ })
+
+ },
+ fail: function (err) {
+ // console.log(err);
+ if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
+ console.log("当初用户拒绝,再次发起授权")
+ wx.openSetting({
+ success(settingdata) {
+ console.log(settingdata)
+ if (settingdata.authSetting['scope.writePhotosAlbum']) {
+ console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
+ } else {
+ console.log('获取权限失败,给出不给权限就无法正常使用的提示')
+ }
+ }
+ })
+ }
+ },
+ complete(res) {
+ console.log(res);
+ }
+ })
+ wx.hideLoading();
+ }, 2000)
+
+
+
+
+
+
+ }
+
+ })
+
+ },
+ /**
+ * 获取access_token
+ */
+ getaccess_token: function (access_token) {
+ wx.request({
+ url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,
+ method: 'POST',
+ data: {
+ path: 'pages/index/index', // 必须是已经发布的小程序存在的页面(否则报错)
+ width: 430,
+ auto_color: false,// 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调
+ line_color: { "r": "0", "g": "0", "b": "0" } // auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
+ },
+ success: function (res) {
+ console.log(res);
+ }
+ })
+ },
+ /**
+ * 拨打电话
+ */
+ phone: function (e) {
let that = this;
wx.makePhoneCall({
phoneNumber: e.target.dataset.merchantlinkphone
});
},
+ /**
+ * 显示分享弹框
+ */
+ showshare: function () {
+ this.setData({
+ isshare: true,
+ })
+ },
+ /**
+* 隐藏分享弹框
+*/
+ hidemodal: function () {
+ this.setData({
+ isshare: false,
+ })
+ },
+ //滑动切换
+ swiperTabView: function (e) {
+ this.setData({
+ currentTab: e.detail.current
+ });
+ },
+ /**
+* 隐藏分享海报
+*/
+ hideposter: function () {
+ this.setData({
+ showpost: false,
+ })
+ },
+ /**
+* 显示分享海报
+*/
+ showPoster: function () {
+ this.setData({
+ showpost: true,
+ })
+ this.begainDrawShareImage();
+ },
+ //点击切换
+ clickTab: function (e) {
+ if (this.data.currentTab === e.target.dataset.current) {
+ return false;
+ } else {
+ this.setData({
+ currentTab: e.target.dataset.current
+ })
+ }
+ },
/**
* 获取商户详情
*/
- getList: function(id) {
+ getList: function (id) {
let that = this;
let data;
data = {
@@ -54,15 +374,15 @@ Page({
id: id
}
Http.get({
- url: config.api.merchantList,
- data: data
- }).then(res => {
- that.setData({
- data: res.data.list[0],
- shopVoList: res.data.list[0].shopVoList,
- imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl,
- })
+ url: config.api.merchantList,
+ data: data
+ }).then(res => {
+ that.setData({
+ data: res.data.list[0],
+ shopVoList: res.data.list[0].shopVoList,
+ imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl,
})
+ })
.catch(err => {
wx.showToast({
title: err.errMsg,
@@ -73,10 +393,10 @@ Page({
})
},
/**
- * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡)
- * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题)
- */
- getCouponList: function(id) {
+ * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡)
+ * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题)
+ */
+ getCouponList: function (id) {
let that = this;
let data;
data = {
@@ -86,13 +406,13 @@ Page({
pageSize: 15,
}
Http.get({
- url: config.api.merchantCouponList,
- data: data
- }).then(res => {
- that.setData({
- couponList: res.data.list,
- })
+ url: config.api.merchantCouponList,
+ data: data
+ }).then(res => {
+ that.setData({
+ couponList: res.data.list,
})
+ })
.catch(err => {
wx.showToast({
title: err.errMsg,
@@ -102,11 +422,10 @@ Page({
});
})
},
-
/**
* 获取多商铺列表
*/
- shopList: function(e) {
+ shopList: function (e) {
wx.navigateTo({
url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}`
})
@@ -114,24 +433,24 @@ Page({
/**
* 生命周期函数--监听页面隐藏
*/
- onHide: function() {
+ onHide: function () {
},
- onShareAppMessage: function(options) {
+ onShareAppMessage: function (res) {
var that = this;
var shareObj = {
title: that.data.data.title,
path: `/pages/index/index?couponChannelId=${that.data.couponChannelId}`,
- success: function(res) {
- if (res.errMsg == 'shareAppMessage:ok') {}
+ success: function (res) {
+ if (res.errMsg == 'shareAppMessage:ok') { }
},
- fail: function(error) {
- if (res.errMsg == 'shareAppMessage:fail cancel') {} else if (res.errMsg == 'shareAppMessage:fail') {}
+ fail: function (error) {
+ if (res.errMsg == 'shareAppMessage:fail cancel') { } else if (res.errMsg == 'shareAppMessage:fail') { }
}
};
// 来自页面内的按钮的转发
- if (options.from == 'button') {
- var eData = options.target.dataset.id;
+ if (res.from === 'button') {
+ var eData = res.target.dataset.id;
shareObj.path = `/pages/index/index?couponChannelId=${eData}`;
}
// 返回shareObj
@@ -140,7 +459,7 @@ Page({
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
- onPullDownRefresh: function() {
+ onPullDownRefresh: function () {
},
})
\ No newline at end of file
diff --git a/pages/index/searchbar/detail/index.wxml b/pages/index/searchbar/detail/index.wxml
index 40f826c..6ea2a17 100644
--- a/pages/index/searchbar/detail/index.wxml
+++ b/pages/index/searchbar/detail/index.wxml
@@ -60,7 +60,7 @@
-
+
@@ -77,5 +77,27 @@
+
+
+
+
+
+
+ 微信好友
+
+
+
+ 生成海报
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/index/searchbar/detail/index.wxss b/pages/index/searchbar/detail/index.wxss
index 4af361b..1d36130 100644
--- a/pages/index/searchbar/detail/index.wxss
+++ b/pages/index/searchbar/detail/index.wxss
@@ -211,4 +211,12 @@
.intro{
font-size:30rpx;
line-height: 36rpx;
-}
\ No newline at end of file
+}
+.user-motto {
+ width:118rpx;
+ background:none;
+ height:60rpx;
+ color:#fff;
+ border: none;
+}
+button::after{ border: none;}