Skip to content

M
mayi-mp-shop
Commit 806ff668 by 程默
Options

fix 11

parent a234435d
Showing with 4 additions and 862 deletions
.gitignore
.DS_Store
node_modules/
dist/
.history/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
......
config/prod.env.js
module.exports = {
SHOP_MIXID:"'zjgyl'",
SHOP_MIXID:"'songsong'",
NODE_ENV: '"production"',
BASE_URL:"'https://shop.mayi888.com'",
......
project.config.json
......@@ -20,7 +20,7 @@
},
"miniprogramRoot": "dist/wx/",
"compileType": "miniprogram",
"appid": "wxdec983ee91e2422a",
"appid": "wxae95a07ffdf11548",
"projectname": "mayi-mp-shop",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
......
src/app.json
{
"pages": [
"pages/index/main",
"pages/livedPoster/main",
"pages/lived/main",
"pages/login/main",
"pages/wxPay/main",
"pages/counter/main",
"pages/address/main",
"pages/contact/main",
"pages/liveList/main",
"pages/historyLive/main",
"pages/liveOver/main",
"pages/live/main"
"pages/contact/main"
],
"window": {
"backgroundTextStyle": "light",
......
src/pages/historyLive/index.vue deleted 100644 → 0
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}">
<div @click="toLiveList" class="history-btn">
<span class="iconfont iconzuo"></span>
</div>
<div class="navbar-title">直播计划</div>
</div>
<div class="uprefresh" v-if="isUprefresh">正在刷新...</div>
<div class="history-list">
<div class="list-item" v-for="(item,index) in list" :key="index" @click="liveDetail(item)">
<div class="item-top">
<div class="top-img">
<img :src="item.logoUrl" alt="">
</div>
<div class="top-name">{{item.shopName}}</div>
</div>
<div class="item-info">
<div class="info-poster">
<image :src="item.coverUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info-detail">
<div class="detail-name">{{item.title}}</div>
<div class="detail-time">开播时间:{{item.startTime}}</div>
<div class="detail-data">
<div class="look data-icon">
<span class="iconfont iconyanjing"></span>
{{item.watchNum}}
</div>
<div class="thumbs data-icon">
<span class="iconfont iconicon_huabanfuben"></span>
{{item.likeNum}}
</div>
<div class="comment data-icon">
<span class="iconfont iconpinglun"></span>
{{item.guestBookNum}}
</div>
</div>
</div>
</div>
</div>
</div>
<van-divider
class="no-more"
v-if="isNoMore"
contentPosition="center"
customStyle="border-color: #ccc;"
>
已经到底了
</van-divider>
</div>
</template>
<script>
import liveApi from '@/api/liveing'
import { DFSImg,getNavbarInfo } from '../../utils/common.js'
export default {
data(){
return{
list:[],
currentPage : 1,
pageSize : 5,
pages : 0,
navTop : '',
navHeight : '',
isUprefresh :false,
isNoMore : false,
}
},
methods:{
getLiveHandler(type){
if(type == 'init'){
wx.showLoading({
title : '加载中'
})
}
liveApi.queryCompleteLive({
pageSize : this.pageSize,
currentPage : this.currentPage
}).then(res => {
if(res.data.code == '200'){
wx.hideLoading()
this.pages = res.data.pages;
if(type == 'refresh'){
wx.hideNavigationBarLoading();
this.isUprefresh = false;
// 停止下拉动作
wx.stopPullDownRefresh();
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
})
this.list = res.data.data;
}else if(type == 'more'){
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
this.list.push(item)
})
if(res.data.current == res.data.pages){
this.isNoMore = true;
}
}else{
res.data.data.forEach(item => {
item.coverUrl = DFSImg(item.coverUrl)
item.logoUrl = DFSImg(item.logoUrl)
item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
})
this.list = res.data.data;
}
}
}).catch(error => {
wx.showToast({ title: error, icon: "none" });
wx.hideLoading()
})
},
liveDetail(item){
wx.navigateTo({url:`../liveOver/main?id=${item.id}&type=3&liveInfo=${JSON.stringify(item)}`})
},
toLiveList(){
wx.reLaunch({url:`../liveList/main`})
}
},
onShow(){
this.isUprefresh = false;
this.isNoMore = false;
this.currentPage = 1;
this.getLiveHandler('init')
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onPullDownRefresh(){
this.isUprefresh = true;
this.currentPage = 1;
this.getLiveHandler('refresh');
wx.showNavigationBarLoading();
},
onReachBottom(){
if(this.currentPage < this.pages){
++this.currentPage;
this.getLiveHandler('more');
}
},
}
</script>
<style scoped lang="scss">
img{
width: 100%;
height: 100%;
}
.container{
min-height: 100vh;
background-color: #efefef;
padding-bottom: 24px;
}
.navbar{
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: white;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
.history-btn{
width: 24px;
height: 24px;
position: absolute;
left: 16px;
.iconfont{
font-size: 15px;
color: #323232;
}
}
.navbar-title{
font-size: 14px;
color: #000;
text-align: center;
}
}
.uprefresh{
line-height: 30px;
font-size: 16px;
color: #999;
text-align: center;
}
.history-list{
width: 100%;
box-sizing: border-box;
padding: 12px 12px 0 12px;
.list-item{
width: 100%;
background-color: white;
border-radius: 4px;
padding: 0 12px 16px;
margin-bottom: 12px;
box-sizing: border-box;
.item-top{
display: flex;
justify-content: flex-start;
align-items: center;
height: 42px;
margin-bottom: 4px;
.top-img{
width: 27px;
height: 27px;
border-radius: 50%;
overflow: hidden;
background-color: #B5B5B5;
margin-right: 6px;
}
.top-name{
font-size: 15px;
color: #333333;
}
}
.item-info{
width: 100%;
display: flex;
justify-content: flex-start;
justify-items: center;
.info-poster{
width: 90px;
height: 90px;
border-radius: 3px;
background-color: #B5B5B5;
margin-right: 16px;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
}
.info-detail{
.detail-name{
font-size: 15px;
color: #333333;
}
.detail-time{
font-size: 13px;
color: #999999;
line-height: 34px;
}
}
.detail-data{
color: #999;
font-size: 13px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 14px;
.data-icon{
margin-right: 16px;
font-size: 13px;
}
}
}
}
}
.no-more{
width: 90%;
line-height: 30px;
font-size: 16px;
color: #999;
text-align: center;
}
</style>
\ No newline at end of file
src/pages/historyLive/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/historyLive/main.json deleted 100644 → 0
{
"navigationBarTitleText":"直播计划",
"enablePullDownRefresh":true,
"navigationStyle":"custom",
"usingComponents": {
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
src/pages/live/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/live/main.json deleted 100644 → 0
{
"navigationStyle":"custom",
"usingComponents": {
"van-popup": "/static/vant/popup/index",
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
src/pages/liveList/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/liveList/main.json deleted 100644 → 0
{
"enablePullDownRefresh":true,
"navigationStyle":"custom",
"navigationBarTitleText":"直播计划",
"usingComponents": {
"van-divider": "/static/vant/divider/index"
}
}
\ No newline at end of file
src/pages/liveOver/index.vue deleted 100644 → 0
<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="masker"></div>
<image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
<div class="conbox">
<div class="live-over">
<div class="over-text">直播已结束</div>
<div class="live-time">直播时长：{{overInfo.liveTime}}</div>
</div>
<div class="live-info">
<div class="info-row item-row-one">
<div class="info-item">
<div class="item-num">{{overInfo.watchNum}}</div>
<div class="item-text">观看</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.goodsClickNum}}</div>
<div class="item-text">商品点击</div>
</div>
</div>
<div class="info-row">
<div class="info-item">
<div class="item-num">{{overInfo.shareNum}}</div>
<div class="item-text">分享</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.guestBookNum}}</div>
<div class="item-text">评论</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.likeNum}}</div>
<div class="item-text">赞</div>
</div>
</div>
</div>
</div>
<navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
</div>
</template>
<script>
import navBar from '@/components/common/navbar.vue'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import liveApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
type : 2,
overInfo : {},
liveInfo : {}
}
},
components:{
navBar
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onShow(){
// this.overInfo = {}
},
onLoad(options){
this.overInfo = {}
if(options.type){
this.type = options.type;
}
this.liveInfo = JSON.parse(options.liveInfo)
this.getOverInfo(options.id)
},
methods:{
getOverInfo(id){
liveApi.queryCompleteDetail({
id : id
}).then(res => {
// console.log(res.data.code == 200)
if(res.data.code == 200){
// console.log(res.data.data)
res.data.data.coverUrl = DFSImg(res.data.data.coverUrl)
this.overInfo = res.data.data
console.log(this.overInfo)
}
})
}
},
}
</script>
<style scoped lang="scss">
.container{
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: rgba(102,102,102,.38);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
.conbox{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.masker{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(102,102,102,.38);
}
.bg-img{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(102,102,102,.38);
}
.live-over{
color: white;
text-align: center;
padding-top: 25vh;
.over-text{
font-size: 36px;
color: #FFFFFF;
font-weight: bold;
}
.live-time{
font-size: 15px;
line-height: 30px;
}
}
.live-info{
font-size: 18px;
color: white;
margin-top: 10vh;
width: 100%;
.info-row{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 40px;
font-weight: bold;
.info-item{
text-align: center;
}
}
.item-row-one{
width: 100%;
padding: 0 60px;
box-sizing: border-box;
.info-item{
width: 50%;
}
}
}
}
</style>
\ No newline at end of file
src/pages/liveOver/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/liveOver/main.json deleted 100644 → 0
{
"navigationStyle":"custom"
}
\ No newline at end of file
src/pages/lived/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
// add this to handle exception
Vue.config.errorHandler = function (err) {
if (console && console.error) {
console.error(err)
}
}
const app = new Vue(App)
app.$mount()
src/pages/lived/main.json deleted 100644 → 0
{
"navigationStyle":"custom",
"navigationBarTextStyle": "white",
"disableScroll": true,
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-icon": "/static/vant/icon/index",
"van-popup": "/static/vant/popup/index",
"van-stepper": "/static/vant/stepper/index"
}
}
\ No newline at end of file
src/pages/livedPoster/index.vue deleted 100644 → 0
<template>
<div class="livedPoster">
<div class="posterWrap">
<canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
name: "",
data() {
return {
InfoSync: {},
liveId: 0,
params: {},
// 海报中信息
info: {
coverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20",
livedTitle: "",
nickName: "",
avatarUrl: "",
miniCode: ""
}
};
},
onLoad(options) {
this.params = JSON.parse(options.params);
this.liveId = this.params.liveId;
Object.assign(this.info,this.info,this.params);
console.log(this.info,'--------------------35');
this.init();
},
onUnload() {},
methods: {
back() {
wx.navigateBack({
delta: 1
});
},
init() {
wx.showLoading({title: '加载中…'})
let liveBroadcastId = this.liveId;
let _this = this;
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
(_this.info.nickName = res.userInfo.nickName),
(_this.info.avatarUrl = res.userInfo.avatarUrl),
_this.initPoster(_this.info);
},
fail: function(res) {
_this.initPoster(_this.info);
}
});
// live.getLiveInfo(liveBroadcastId).then(res => {
// if (res.data.code == 200) {
// let resData = res.data.data;
// this.info.livedTitle = resData.title;
// this.info.livedStatus = resData.liveBroadcastState;
// let cImg = DFSImg(resData.coverUrl);
// if (cImg.indexOf("https") == -1) {
// this.info.coverUrl = cImg.replace("http", "https");
// }
// let newTime = new Date(resData.startTime.replace(/-/g, "/"));
// this.info.livedTime = `${newTime.getMonth() +
// 1}月${newTime.getDate() -
// 1}日 ${newTime.getHours()}:${newTime.getMinutes()}`;
// }
// });
},
initPoster(info) {
console.log(info, "---------------------71");
const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1;
const ctx = wx.createCanvasContext("posterCanvas");
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 310 * bili, 520 * bili);
//封面
this.saveThe(info.coverUrl, path => {
ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
ctx.save();
// 微信昵称
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(15);
ctx.fillText(info.nickName, 80 * bili, 420 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(40 * bili, 410 * bili, 30 * bili, 0, 2 * Math.PI);
ctx.fill();
//头像
this.saveThe(info.avatarUrl, path => {
ctx.clip();
ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
});
wx.hideLoading();
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
wx.getImageInfo({
src: url, //服务器返回的图片地址
success: res => {
callback(res.path);
},
fail: function(res) {}
});
},
getImg() {
this.handleSave();
},
// 点击保存时，将画布生成海报
handleSave() {
var that = this;
wx.showLoading({
title: "正在保存...",
mask: true
});
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
that.saveImg();
},
fail() {
wx.hideLoading();
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
});
} else {
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else {
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
}
});
}
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
},
saveImg() {
// 按照设备比例去计算图片和画布尺寸
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
// 需要权限
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: "图片已保存到相册，赶紧晒一下吧~",
showCancel: false,
confirmText: "好的",
confirmColor: "#333"
});
},
fail: function(res) {
wx.hideLoading();
wx.showToast({
title: "没有相册权限",
icon: "none",
duration: 2000
});
}
});
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
},
// 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发
handleShowImg() {
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
wx.previewImage({
urls: [res.tempFilePath],
current: res.tempFilePath
});
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
}
}
};
</script>
<style scoped lang="scss">
.livedPoster {
position: relative;
}
.posterWrap {
min-height: calc(100vh - 20px);
padding-top: 20px;
background-color: #f1f1f1;
}
.myCanvas {
width: 310px;
height: 520px;
margin: 0 auto;
background: #fff;
}
</style>
src/pages/livedPoster/main.js deleted 100644 → 0
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
\ No newline at end of file
src/pages/livedPoster/main.json deleted 100644 → 0
{
"navigationBarTitleText": "点击保存图片"
}
\ No newline at end of file
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