Skip to content

7
7-Eleven
Commit 90ec1b8d by 赵雅纹
Options

plus购买

parent 9a99d539
Showing with 161 additions and 151 deletions
src/component/cardModal/cardModal.js
// component/cardModal/cardModal.js // component/cardModal/cardModal.js
const app = getApp();
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
const utils = require('../../utils/util') const utils = require('../../utils/util')
...@@ -30,6 +31,7 @@ Component({ ...@@ -30,6 +31,7 @@ Component({
* 组件的初始数据 * 组件的初始数据
*/ */
data: { data: {
codeImg:''
}, },
/** /**
...@@ -40,8 +42,35 @@ Component({ ...@@ -40,8 +42,35 @@ Component({
this.setData({ this.setData({
showCardModal:false showCardModal:false
}) })
this.getMiniCode();
this.selectComponent('#getPoster').getAvaterInfo() },
//获取二维码
getMiniCode() {
const urls = utils.getCurrentPageUrlWithArgs()
const page = urls && urls.split("?")[0]
let data = {
"autoColor": true,
"page": this.data.pagePath,
"scene": '123',
"width": 100
}
console.log('---', this.data.pagePath)
wxService.post(`/merchant/contentMobileTerminal/getAppletQrCode`, data).then(res => {
const { result, data } = res.data
if (result == 0) {
this.setData({
codeImg: app.globalData.imageUrl + '/' + data.codeUrl
// codeImg: "https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg"
})
if (this.data.codeImg) {
this.selectComponent('#getPoster').getAvaterInfo()
}
}
})
}, },
_showMiniCard(e){ _showMiniCard(e){
......
src/component/cardModal/cardModal.wxml
...@@ -18,6 +18,6 @@ ...@@ -18,6 +18,6 @@
<view class="quick-share" bindtap="gotoPoster" hidden='{{!showCardModal}}'> <view class="quick-share" bindtap="gotoPoster" hidden='{{!showCardModal}}'>
生成朋友圈海报 生成朋友圈海报
</view> </view>
<share-poster id="getPoster" bindmyevent="myEventListener" avater="{{cardUrl}}" productDesc="{{cardTitle}}" userAvatar="http://t2.hddhhn.com/uploads/tu/201806/9999/91480c0c87.jpg" bind:showMiniCard="_showMiniCard" pagePath="{{pagePath}}"></share-poster> <share-poster id="getPoster" bindmyevent="myEventListener" avater="{{cardUrl}}" productDesc="{{cardTitle}}" userAvatar="http://t2.hddhhn.com/uploads/tu/201806/9999/91480c0c87.jpg" bind:showMiniCard="_showMiniCard" pagePath="{{pagePath}}" code-img="{{codeImg}}"></share-poster>
src/component/plus/plus.js
...@@ -14,13 +14,18 @@ Component({ ...@@ -14,13 +14,18 @@ Component({
* 组件的初始数据 * 组件的初始数据
*/ */
data: { data: {
currentTab:0
}, },
/** /**
* 组件的方法列表 * 组件的方法列表
*/ */
methods: { methods: {
switchNav(e){
console.log(e)
this.setData({
currentTab: e.currentTarget.dataset.current
})
}
} }
}) })
src/component/plus/plus.wxml
<!--component/plus/plus.wxml--> <!--component/plus/plus.wxml-->
<view class="plus-bottom fixed-bottom0 clearfix::after"> <view class="plus-wrap" wx:if="{{skuList}}">
<view class="bottom-top"> <scroll-view scroll-x class="scroll-view_H" scroll-with-animation="{{true}}">
<scroll-view scroll-x="true" class="scroll-view_H"> <block
<view class="uploadWrap" scroll-x="true"> wx:for="{{skuList}}"
<block wx:for='{{skuList}}' wx:for-item="sub" wx:key="s"> wx:for-index="idx"
<view class="upload_Item item-img" style="background-image:url({{sub.mainImgUrl}})"> wx:for-item="navItem"
<view class="item-mouth">每月仅￥ 25</view> wx:key="idx"
<view class="item-year">全年卡· 366 天</view>
<view class="item-price">￥ 300</view> >
</view> <view
</block> class="scroll-view-item {{currentTab == idx ?'poster-active':''}}"
</view> data-current="{{idx}}"
</scroll-view> data-startTimeStr="{{navItem.startTimeStr}}"
</view> data-endTimeStr="{{navItem.endTimeStr}}"
<view class="bottom-bottom"> data-btnText="{{navItem.buttonText}}"
<view class="bottom-pay">立即支付 ￥158 </view> data-id="{{navItem.id}}"
</view> bindtap="switchNav"
</view> >
<view class="plus-choose">
<text>每月仅￥25</text>
</view>
<view class="card-kinds">
全年卡· 366 天
</view>
<view class="plus-price">
<text class="rmb">￥</text>
<text class="amount">100</text>
</view>
<view class="select-plus" wx:if="{{idx == currentTab}}">
<view class="circle-radio theme-color">
<image class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="pay">
<button class="btn btn-primary">
<text>立即支付</text>
<text>￥158</text>
</button>
</view>
</view>
\ No newline at end of file
src/component/plus/plus.wxss
/* component/plus/plus.wxss */ /* component/plus/plus.wxss */
@import '../../base/base.wxss'; @import '../../base/base.wxss';
.scroll-view_H{ @import "/app.wxss";
.plus-wrap {
width: 100%; width: 100%;
display: flex;
white-space: nowrap;
box-sizing: border-box;
height: 226rpx;
position: fixed;
bottom: 88rpx;
padding: 36rpx 0 36rpx 30rpx;
background-color: #C09A74;
} }
.plus-bottom { .scroll-view_H {
height: 314rpx; width: 100%;
/* background-color: rgba(192, 154, 116, .02); */
background-color: pink;
} }
.plus-bottom .bottom-top { .scroll-view-item {
height: 226rpx; display: inline-block;
/* display: flex; width: 209rpx;
align-items: center; */ height: 155rpx;
background-color: #d8d8d8;
margin-right: 12rpx;
border-radius: 12rpx;
background-position: 100% 100%;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
} }
.pro-list { .poster-tips{
/* height: 155rpx; */ position: fixed;
background-color: gray; bottom: 220rpx;
margin-left: 20rpx; left: 33rpx;
/* margin-top: 40rpx; */
box-sizing: border-box;
white-space: nowrap;
/* margin: 40rpx 30rpx 0 30rpx; */
} }
.poster-tips image{
.item-mouth { width: 362rpx;
height: 25rpx;
color: rgba(255, 255, 255, 1);
font-size: 18rpx;
} }
.item-year { .pay{
height: 33rpx; height: 88rpx;
color: rgba(247, 181, 0, 1); line-height: 88rpx;
font-size: 24rpx; position: fixed;
bottom: 0;
right: 30rpx;
display: flex;
align-items: center;
} }
.item-price { .pay button{
height: 50rpx; width: 280rpx;
color: rgba(245, 248, 250, 1); height: 52rpx;
font-size: 36rpx; line-height: 52rpx;
border-radius: 26rpx;
font-size: 26rpx;
} }
.plus-bottom .bottom-bottom { .card-kinds{
width: 100%; font-size: 24rpx;
height: 88rpx; color: #F7B500;
padding-top: 18rpx; margin: 8rpx 0 0 34rpx;
background-color: rgba(255, 255, 255, 1);
} }
.bottom-pay { .scroll-view-item .plus-price .amount{
text-align: center; color: #F5F8FA;
width: 280rpx; font-size: 36rpx;
line-height: 52rpx;
height: 52rpx;
border-radius: 26px;
background-color: rgba(203, 60, 60, 1);
left: 480px;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
float: right;
margin-right: 30rpx;
} }
.item-img { .scroll-view-item .plus-price .rmb{
background-repeat: no-repeat; font-size: 24rpx;
background-size: 100% 100%; color: #ffffff;
} }
.uploadWrap { .scroll-view-item .plus-price{
/* height: 155rpx; */ margin:10rpx 0 0 100rpx;
height: 100%;
width: 100%;
display: flex;
align-items: center;
display: -webkit-box;
flex-direction: column;
/* margin: 40rpx 30rpx 0 30rpx; */
} }
.upload_Item { .plus-choose{
width: 209rpx; font-size: 18rpx;
height: 155rpx; color: #ffffff;
flex: 1; margin: 24rpx 0 0 34rpx;
margin: 0rpx 15rpx 15rpx 0;
box-sizing: border-box;
background-color: aqua;
} }
.upload_Item:last-child { .select-plus{
margin-right: 20rpx; position: absolute;
top: 18rpx;
right: 20rpx;
} }
.upload_Item_img { .tick-success{
width: 209rpx; width: 18rpx;
height: 155rpx;
} }
.circle-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
/* border: 1rpx solid rgba(0, 0, 0, 0.2); */
line-height: 26rpx;
text-align: center;
}
src/component/sharePoster/sharePoster.js
...@@ -19,7 +19,7 @@ Component({ ...@@ -19,7 +19,7 @@ Component({
type: String, type: String,
value: '' value: ''
}, },
pagePath:{ codeImg:{
type: String, type: String,
value: '' value: ''
} }
...@@ -35,7 +35,6 @@ Component({ ...@@ -35,7 +35,6 @@ Component({
}, },
attached() { attached() {
}, },
/** /**
...@@ -91,59 +90,7 @@ Component({ ...@@ -91,59 +90,7 @@ Component({
} }
}, },
//获取二维码
getMiniCode() {
const urls = utils.getCurrentPageUrlWithArgs()
const page = urls && urls.split("?")[0]
let data = {
"autoColor": true,
"page": this.data.pagePath,
"scene": '123',
"width": 100
}
console.log('---', this.data.pagePath)
wxService.post(`/merchant/contentMobileTerminal/getAppletQrCode`, data).then(res => {
const { result, data } = res.data
if(result == 0){
this.setData({
codeImg: data.codeUrl
// codeImg: "https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg"
})
}
// if (result == 0) {
// const fsm = wx.getFileSystemManager();
// const FILE_BASE_NAME = 'tmp_base64src';
// const base64src = function (data) {
// return new Promise((resolve, reject) => {
// const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
// const buffer = wx.base64ToArrayBuffer(data);
// fsm.writeFile({
// filePath,
// data: buffer,
// encoding: 'binary',
// success() {
// resolve(filePath);
// },
// fail() {
// reject(new Error('ERROR_BASE64SRC_WRITE'));
// },
// });
// });
// };
// base64src(data).then(res => {
// console.log(res)
// this.setData({
// codeImg: res
// })
// })
// }
})
},
//下载二维码 //下载二维码
getQrCode: function (productSrc, imgInfo = "") { getQrCode: function (productSrc, imgInfo = "") {
...@@ -183,8 +130,7 @@ Component({ ...@@ -183,8 +130,7 @@ Component({
//canvas绘制分享海报 //canvas绘制分享海报
sharePosteCanvas: function (avaterSrc, codeSrc, imgInfo) { sharePosteCanvas: function (avaterSrc, codeSrc, imgInfo) {
// 获取小程序二维码 url
this.getMiniCode()
wx.showLoading({ wx.showLoading({
title: '生成中...', title: '生成中...',
mask: true, mask: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment