Skip to content

M
mallapp
Commit 588687ad authored by 罗超's avatar 罗超
Browse files
Options

调整部分样式

parent ca7feb03
Show whitespace changes
Inline Side-by-side
Showing with 675 additions and 285 deletions
App.vue
View file @ 588687ad
...@@ -31,6 +31,7 @@ export default { ...@@ -31,6 +31,7 @@ export default {
}, },
(res) => { (res) => {
uni.setStorageSync("basedata", res.data); uni.setStorageSync("basedata", res.data);
uni.setStorageSync('navs', res.data.navbar.navs??[])
this.basedata = res.data; this.basedata = res.data;
this.$uiConfig.mainColor=res.data.mall.setting.mallStyle.main this.$uiConfig.mainColor=res.data.mall.setting.mallStyle.main
this.$uiConfig.secondary=res.data.mall.setting.mallStyle.secondary this.$uiConfig.secondary=res.data.mall.setting.mallStyle.secondary
......
components/tabbar/index.vue
View file @ 588687ad
...@@ -158,15 +158,11 @@ export default { ...@@ -158,15 +158,11 @@ export default {
} }
// #endif // #endif
}); });
if(uni.getStorageSync("basedata")){ if(uni.getStorageSync("navs")){
this.navs = uni.getStorageSync("basedata") this.navs = uni.getStorageSync("navs")??[];
? uni.getStorageSync("basedata").navbar.navs
: [];
}else{ }else{
setTimeout(()=>{ setTimeout(()=>{
this.navs = uni.getStorageSync("basedata") this.navs = uni.getStorageSync("navs")??[];
? uni.getStorageSync("basedata").navbar.navs
: [];
this.activeHandler(); this.activeHandler();
},3000) },3000)
} }
......
pages.json
View file @ 588687ad
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
"easycom": { "easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ "pages": [{
{
"path": "pages/index/index", "path": "pages/index/index",
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"style": { "style": {
...@@ -64,8 +63,7 @@ ...@@ -64,8 +63,7 @@
// }, // },
{ {
"root": "pages/balance", "root": "pages/balance",
"pages": [ "pages": [{
{
"path": "recharge" "path": "recharge"
}, },
{ {
...@@ -88,6 +86,8 @@ ...@@ -88,6 +86,8 @@
}, },
"pages": [{ "pages": [{
"path": "index" "path": "index"
}, {
"path": "share"
}] }]
}, },
{ {
...@@ -105,22 +105,21 @@ ...@@ -105,22 +105,21 @@
}, },
{ {
"root": "pages/mySupplier", "root": "pages/mySupplier",
"pages": [ "pages": [{
{
"path": "index/index", "path": "index/index",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},{ }, {
"path":"myBill" "path": "myBill"
},{ }, {
"path":"billDetails" "path": "billDetails"
},{ }, {
"path":"mySupplierList" "path": "mySupplierList"
},{ }, {
"path":"myProduct" "path": "myProduct"
},{ }, {
"path":"supplierOrder" "path": "supplierOrder"
} }
] ]
......
pages/index/index.vue
View file @ 588687ad
...@@ -175,11 +175,26 @@ export default { ...@@ -175,11 +175,26 @@ export default {
//兼容之前小程序的调转 //兼容之前小程序的调转
this.getjump(options.scene); this.getjump(options.scene);
} }
// #ifdef MP-WEIXIN
wx.showShareMenu({ wx.showShareMenu({
withShareTicket: true, withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"], menus: ["shareAppMessage", "shareTimeline"],
}); });
if(uni.getStorageSync('mall_UserInfo')){
let uid=uni.getStorageSync('mall_UserInfo').UserId
wx.getUserInfo({
success: function (res) {
let msg={
Id:uid,
AliasName:res.userInfo.nickName,
Photo:res.userInfo.avatarUrl
}
that.updateuserinfo(msg)
},
});
}
// #endif
this.init(); this.init();
let set = uni.getStorageSync("basedata") let set = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").mall.setting ? uni.getStorageSync("basedata").mall.setting
...@@ -196,6 +211,7 @@ export default { ...@@ -196,6 +211,7 @@ export default {
this.isShowBack(); this.isShowBack();
uni.showNavigationBarLoading(); uni.showNavigationBarLoading();
}, },
// #ifdef MP-WEIXIN
onShareTimeline() { onShareTimeline() {
setTimeout(() => { setTimeout(() => {
console.log("分享调用"); console.log("分享调用");
...@@ -227,6 +243,7 @@ export default { ...@@ -227,6 +243,7 @@ export default {
imageUrl: this.setting.share_pic ? this.setting.share_pic : "", imageUrl: this.setting.share_pic ? this.setting.share_pic : "",
}; };
}, },
// #endif
onShow() { onShow() {
setTimeout(() => { setTimeout(() => {
uni.hideNavigationBarLoading(); uni.hideNavigationBarLoading();
...@@ -236,15 +253,25 @@ export default { ...@@ -236,15 +253,25 @@ export default {
}, },
methods: { methods: {
updateuserinfo(msg){
this.request2(
{
url: "/api/MemberUser/SetMemberPhoto",
data: msg,
},
(res) => {
//静默处理不做任何提示
},
(error) => {}
);
},
goback() { goback() {
uni.navigateBack({ uni.navigateBack({
delta: 1, delta: 1,
}); });
}, },
isShowBack() { isShowBack() {
let navs = uni.getStorageSync("basedata") let navs = uni.getStorageSync("navs") ?? [];
? uni.getStorageSync("basedata").navbar.navs
: [];
if (navs) { if (navs) {
let t = getCurrentPages(); let t = getCurrentPages();
let query = t[t.length - 1].__displayReporter.query; let query = t[t.length - 1].__displayReporter.query;
...@@ -255,10 +282,10 @@ export default { ...@@ -255,10 +282,10 @@ export default {
if (queryString != "") { if (queryString != "") {
queryString = "?" + queryString.substring(1, queryString.length); queryString = "?" + queryString.substring(1, queryString.length);
} }
this.crtPath = "/" + t[t.length - 1].route + queryString; let crtPath = "/" + t[t.length - 1].route + queryString;
let isExsit = false; let isExsit = false;
navs.forEach((x, i) => { navs.forEach((x, i) => {
if (x.url == this.crtPath) { if (x.url == crtPath) {
isExsit = true; isExsit = true;
} }
}); });
...@@ -304,6 +331,9 @@ export default { ...@@ -304,6 +331,9 @@ export default {
(res) => { (res) => {
this.indexPageData = res.data.home_pages.navs[0].template.data; this.indexPageData = res.data.home_pages.navs[0].template.data;
this.myPageData = res.data; this.myPageData = res.data;
if (res.data.navbar.navs) {
uni.setStorageSync("navs", res.data.navbar.navs);
}
uni.setStorageSync("basedata", res.data); uni.setStorageSync("basedata", res.data);
if (res.data.home_pages.title != "") { if (res.data.home_pages.title != "") {
if (this.pageId == 0) { if (this.pageId == 0) {
...@@ -344,7 +374,6 @@ export default { ...@@ -344,7 +374,6 @@ export default {
}, },
formatBg() { formatBg() {
this.myPageData.home_pages.navs.forEach((y) => { this.myPageData.home_pages.navs.forEach((y) => {
y.template.data.forEach((x) => { y.template.data.forEach((x) => {
if (x.id == "background") { if (x.id == "background") {
let t = ""; let t = "";
...@@ -380,8 +409,8 @@ export default { ...@@ -380,8 +409,8 @@ export default {
// y.templateBg +="padding-bottom:"+(this.$uiConfig.is_bang ? '88px' : '60px')+";box-sizing: border-box;"; // y.templateBg +="padding-bottom:"+(this.$uiConfig.is_bang ? '88px' : '60px')+";box-sizing: border-box;";
} }
}); });
if(!y.templateBg){ if (!y.templateBg) {
y.templateBg={titleColor:"#000"}; y.templateBg = { titleColor: "#000" };
} }
}); });
}, },
...@@ -443,7 +472,6 @@ export default { ...@@ -443,7 +472,6 @@ export default {
border-bottom: 12px solid black; border-bottom: 12px solid black;
position: fixed; position: fixed;
right: 65px; right: 65px;
} }
.index-title { .index-title {
line-height: 45px !important; line-height: 45px !important;
......
pages/live/index.vue
View file @ 588687ad
<template> <template>
<view class="liveStyle" :style="{ height: contentHeight }"> <view class="liveStyle" :style="{ height: contentHeight }">
<u-empty v-if="g.length == 0" text="暂无相关直播列表" mode="list"></u-empty> <u-empty v-if="g.length == 0" text="暂无相关直播列表" mode="list"></u-empty>
<template <template v-if="g.length > 0">
v-if="g.length > 0" <view
> style="
<view style="
height: calc(100vh - 50px); height: calc(100vh - 50px);
width: calc(100vw - 20px); width: calc(100vw - 20px);
margin-left: 10px; margin-left: 10px;
overflow: hidden; overflow: hidden;
padding-top: 10px; padding-top: 10px;
"> "
>
<scroll-view <scroll-view
:scroll-y="true" :scroll-y="true"
:enable-back-to-top="true" :enable-back-to-top="true"
...@@ -19,50 +19,79 @@ ...@@ -19,50 +19,79 @@
@scrolltolower="lower" @scrolltolower="lower"
:style="{ height: '100%' ,}" :style="{ height: '100%' ,}"
> >
<view class="u-good-list" > <view class="u-good-list">
<u-row gutter="20"> <u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci" > <u-col span="6" v-for="(cx, ci) in g" :key="ci">
<view class="good" @click="clickHandler(cx)"> <view class="good" @click="clickHandler(cx)">
<image src="../../static/images/share.png" mode="widthFix" class="share" v-if="cx.ExtensionImg&&cx.ExtensionImg!=''" @click="goshare(cx.ExtensionImg)" />
<!-- <view class="good-img" :style="{ 'background-image': 'url(' + (cx.cover_img ? cx.cover_img : '') + ')', backgroundSize: '100% 100%' }"> --> <!-- <view class="good-img" :style="{ 'background-image': 'url(' + (cx.cover_img ? cx.cover_img : '') + ')', backgroundSize: '100% 100%' }"> -->
<view class="good-img" :style="{ 'background-image': 'url(' + (cx.cover_img ? cx.cover_img : '') + ')', backgroundSize: 'cover' ,'background-repeat': 'no-repeat'}"> <view
class="good-img"
:style="{ 'background-image': 'url(' + (cx.cover_img ? cx.cover_img : '') + ')', backgroundSize: 'cover' ,'background-repeat': 'no-repeat'}"
>
<!-- 播放按钮 --> <!-- 播放按钮 -->
<view class="livebtn" v-if='cx.live_status==104 || cx.live_status==105|| cx.live_status==106 '></view> <view
<u-icon name="play-circle-o" v-if='cx.live_status==105' color="#fff" size="100" style='position: absolute;left: 50%;top:50%;margin-left: -50rpx;margin-top: -50rpx;'></u-icon> class="livebtn"
<image src="/static/images/jinbo.png" v-if="cx.live_status==104" style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;"/> v-if="cx.live_status==104 || cx.live_status==105|| cx.live_status==106 "
<image src="/static/images/yic.png" v-if="cx.live_status==106" style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;"/> ></view>
<u-icon
name="play-circle-o"
v-if="cx.live_status==105"
color="#fff"
size="100"
style="position: absolute;left: 50%;top:50%;margin-left: -50rpx;margin-top: -50rpx;"
></u-icon>
<image
src="/static/images/jinbo.png"
v-if="cx.live_status==104"
style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;"
/>
<image
src="/static/images/yic.png"
v-if="cx.live_status==106"
style="width: 50px; height: 50px;position: absolute;left: 50%;top:50%;margin-left: -25px;margin-top: -25px;"
/>
</view> </view>
<view style="position: absolute;left: 0;bottom: 0;color: #FFFFFF;background: rgba(0, 0, 0, 0.5);width: 100%; padding: 5px 0;"> <view
style="position: absolute;left: 0;bottom: 0;color: #FFFFFF;background: rgba(0, 0, 0, 0.5);width: 100%; padding: 5px 0;"
>
<view class="good-info"> <view class="good-info">
<u-avatar :src="cx.anchor_img" size="30" ></u-avatar> <u-avatar :src="cx.anchor_img" size="30"></u-avatar>
<Text style="font-size: 11px;margin-left: 5px;">{{cx.anchor_name}}</Text> <Text style="font-size: 11px;margin-left: 5px;">{{cx.anchor_name}}</Text>
</view> </view>
<view class="good-name">{{ cx.name }}</view> <view class="good-name">{{ cx.name }}</view>
</view> </view>
<!-- 直播的状态 --> <!-- 直播的状态 -->
<view class="liveState" v-if='cx.live_status==101' style=" background-image: linear-gradient(to right,#FF8FB9,#FF002A);"> <view
class="liveState"
v-if="cx.live_status==101"
style=" background-image: linear-gradient(to right,#FF8FB9,#FF002A);"
>
<Text>直播中</Text> <Text>直播中</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==102' style="background: #FFFFFF;color: #111111;"> <view
class="liveState"
v-if="cx.live_status==102"
style="background: #FFFFFF;color: #111111;"
>
<Text>未开始</Text> <Text>未开始</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==103' > <view class="liveState" v-if="cx.live_status==103">
<Text>已结束</Text> <Text>已结束</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==104' > <view class="liveState" v-if="cx.live_status==104">
<Text>禁播</Text> <Text>禁播</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==105' > <view class="liveState" v-if="cx.live_status==105">
<Text>暂停</Text> <Text>暂停</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==106' > <view class="liveState" v-if="cx.live_status==106">
<Text>异常</Text> <Text>异常</Text>
</view> </view>
<view class="liveState" v-if='cx.live_status==107' > <view class="liveState" v-if="cx.live_status==107">
<Text>已过期</Text> <Text>已过期</Text>
</view> </view>
</view> </view>
</u-col> </u-col>
</u-row> </u-row>
...@@ -75,11 +104,8 @@ ...@@ -75,11 +104,8 @@
:margin-bottom="20" :margin-bottom="20"
bg-color="#f3f4f6" bg-color="#f3f4f6"
/> />
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth> <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<tabbars></tabbars> <tabbars></tabbars>
...@@ -87,12 +113,12 @@ ...@@ -87,12 +113,12 @@
</template> </template>
<script> <script>
import auth from "@/components/auth/index.vue"; import auth from "@/components/auth/index.vue";
import tabbars from '@/components/tabbar/index'; import tabbars from "@/components/tabbar/index";
export default { export default {
components: { components: {
tabbars, tabbars,
auth auth,
}, },
data() { data() {
return { return {
...@@ -100,10 +126,10 @@ export default { ...@@ -100,10 +126,10 @@ export default {
secondary: "", secondary: "",
pageTitle: "直播列表", pageTitle: "直播列表",
contentHeight: 0, contentHeight: 0,
g:[], g: [],
msg:{ msg: {
pageIndex: 1, pageIndex: 1,
pageSize:10, pageSize: 10,
}, },
page_count: 1, page_count: 1,
status: "loadmore", status: "loadmore",
...@@ -112,31 +138,36 @@ export default { ...@@ -112,31 +138,36 @@ export default {
loading: "努力加载中", loading: "努力加载中",
nomore: "没有更多了", nomore: "没有更多了",
}, },
u:{}, u: {},
showAuth:false showAuth: false,
}; };
}, },
onLoad(option) { onLoad(option) {
this.mc = this.$uiConfig.mainColor; this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary; this.secondary = this.$uiConfig.secondary;
let c = this.$uiConfig.is_bang ? 80 : 52; let c = this.$uiConfig.is_bang ? 80 : 52;
this.contentHeight = this.$utils.calcContentHeight(c-40) + "px"; this.contentHeight = this.$utils.calcContentHeight(c - 40) + "px";
this.initPage(); this.initPage();
uni.showNavigationBarLoading(); uni.showNavigationBarLoading();
if (option.user_id) {
this.u = uni.getStorageSync('mall_UserInfo'); uni.setStorageSync("pid", { pid: options.user_id });
}
this.u = uni.getStorageSync("mall_UserInfo");
if (!this.u) { if (!this.u) {
this.u = { this.u = {
nickName: '未登录', nickName: "未登录",
avatarUrl: '' avatarUrl: "",
}; };
this.showAuth = true; this.showAuth = true;
}else{ } else {
this.init(); this.init();
} }
}, },
methods: { methods: {
goshare(img){
console.log(img)
uni.navigateTo({url: '/pages/live/share?pic='+img});
},
initPage() { initPage() {
let currentPages = getCurrentPages(); let currentPages = getCurrentPages();
let u = "/" + currentPages[currentPages.length - 1].route; let u = "/" + currentPages[currentPages.length - 1].route;
...@@ -152,26 +183,28 @@ export default { ...@@ -152,26 +183,28 @@ export default {
title: this.pageTitle, title: this.pageTitle,
}); });
}, },
clickHandler(cx){ clickHandler(cx) {
let uid=uni.getStorageSync('mall_UserInfo') ?uni.getStorageSync('mall_UserInfo').UserId:0; let uid = uni.getStorageSync("mall_UserInfo")
let customParams = encodeURIComponent(JSON.stringify({user_id: uid })) ? uni.getStorageSync("mall_UserInfo").UserId
: 0;
let customParams = encodeURIComponent(JSON.stringify({ user_id: uid }));
wx.navigateTo({ wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}&custom_params=${customParams}` url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}&custom_params=${customParams}`,
}) });
}, },
init() { init() {
uni.showLoading({ uni.showLoading({
title: '加载中' title: "加载中",
}); });
this.request2( this.request2(
{ {
url: '/api/LiveHouse/GetLiveHouseList', url: "/api/LiveHouse/GetLiveHouseList",
data: this.msg data: this.msg,
}, },
res => { (res) => {
uni.hideLoading(); uni.hideLoading();
uni.hideNavigationBarLoading(); uni.hideNavigationBarLoading();
if(res.resultCode==1){ if (res.resultCode == 1) {
this.g = this.g.concat(res.data.pageData); this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount; this.page_count = res.data.pageCount;
if (this.page_count == 1) { if (this.page_count == 1) {
...@@ -182,7 +215,6 @@ export default { ...@@ -182,7 +215,6 @@ export default {
); );
}, },
lower(e) { lower(e) {
if (this.msg.pageIndex < this.page_count) { if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++; this.msg.pageIndex++;
this.status = "loading"; this.status = "loading";
...@@ -192,39 +224,46 @@ export default { ...@@ -192,39 +224,46 @@ export default {
} }
}, },
reloadUserinfo() { reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo'); this.u = uni.getStorageSync("mall_UserInfo");
// this.showAuth = false; // this.showAuth = false;
this.init() this.init();
}, },
//关闭登录窗口 //关闭登录窗口
gbAuth(){ gbAuth() {
this.showAuth=false; this.showAuth = false;
}, },
}, },
}; };
</script> </script>
<style> <style>
.liveStyle{ .liveStyle {
background: #f3f4f6; background: #f3f4f6;
} }
.liveStyle .u-good-list .good { .liveStyle .u-good-list .good {
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 10px;
height: 243px; height: 243px;
position: relative; position: relative;
} }
.liveStyle .u-good-list .good .good-img { .liveStyle .u-good-list .good .share{
width: 50rpx;
height: 50rpx;
position: absolute;
right: 10px;
top: 5px;
z-index: 5;
}
.liveStyle .u-good-list .good .good-img {
width: 100%; width: 100%;
height: 243px; height: 243px;
display: block; display: block;
position: relative; position: relative;
}
} .liveStyle .u-good-list .good .good-name {
.liveStyle .u-good-list .good .good-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
...@@ -234,21 +273,20 @@ export default { ...@@ -234,21 +273,20 @@ export default {
font-size: 13px; font-size: 13px;
margin: 7px 10px; margin: 7px 10px;
height: 18px; height: 18px;
} }
.liveStyle .u-good-list .good .good-info { .liveStyle .u-good-list .good .good-info {
display: flex; display: flex;
margin: 7px 10px; margin: 7px 10px;
margin-top: 0; margin-top: 0;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
}
} .liveStyle .u-good-list .liveState {
.liveStyle .u-good-list .liveState{
width: 50px; width: 50px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left: 0; left: 0;
top:5px; top: 5px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
...@@ -258,11 +296,11 @@ export default { ...@@ -258,11 +296,11 @@ export default {
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
font-size: 11px; font-size: 11px;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
} }
.liveStyle .livebtn{ .liveStyle .livebtn {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -270,6 +308,5 @@ export default { ...@@ -270,6 +308,5 @@ export default {
height: 100%; height: 100%;
background: #999999; background: #999999;
opacity: 0.3; opacity: 0.3;
}
}
</style> </style>
pages/live/share.vue 0 → 100644
View file @ 588687ad
<template>
<view class="qrcodeLiveStyle" :style="{'height':contentHeight}">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" style="width: 320px;margin-top: 20px;" />
<canvas canvas-id="firstCanvas" class="sty-box" @error="canvasIdErrorCallback"></canvas>
<view class="btn" :style="{background:mainColor}" @click="preservation">
<Text>保存海报</Text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "直播海报",
contentHeight: 0,
mainColor: "",
qrcode: "",
fenxqrcode: "",
UserInfo: "",
tempPic: "",
bgPic: "",
};
},
created() {
this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.UserInfo = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo")
: {};
},
onLoad(option) {
this.bgPic =
option.pic ??
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1597312414000_253.jpg";
},
onReady() {
this.init();
},
mounted() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
init() {
// uni.showNavigationBarLoading();
// this.request2(
// {
// url: "/api/AppletUser/GetFenXiaoPoster",
// data: {},
// },
// (res) => {
// uni.hideNavigationBarLoading();
// this.qrcode = res.data;
// this.getWeiXinQRCode();
// }
// );
this.getWeiXinQRCode();
},
getWeiXinQRCode() {
let that = this;
uni.showNavigationBarLoading();
that.request2(
{
url: "/api/AppletUser/GetWeiXinQRCodeForApplet",
data: {
Path: "pages/live/index?user_id=" + that.UserInfo.UserId,
With: that.qrcode.QrCodeSize,
},
},
(res) => {
uni.hideNavigationBarLoading();
that.fenxqrcode = that.host2 + res.data;
console.log(that.fenxqrcode);
let tmpTimeout = setTimeout(() => {
that.drawCtx();
clearTimeout(tmpTimeout);
}, 100);
}
);
},
drawCtx() {
uni.showLoading({
title: "正在生成",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
uni.getImageInfo({
src: that.bgPic,
success: function (image) {
console.log("绘制");
ctx.drawImage(image.path, 0, 0, 750, 1344); //绘制图
uni.getImageInfo({
//头像
src: that.fenxqrcode,
success: function (image) {
ctx.save();
ctx.beginPath();
ctx.arc(595 + 63, 1200 + 63, 63, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(image.path, 595, 1200, 126, 126); //绘制头像
that.drawQrCode(ctx);
},
});
// if (that.qrcode.IsShowNick == 0) {
// console.log("绘制文字");
// that.drawTitle(ctx); //绘制文字
// }
// if (that.qrcode.IsShowHead == 0) {
// console.log("绘制头像");
// uni.getImageInfo({
// //头像
// src: that.UserInfo.Photo,
// success: function (image) {
// ctx.save(); // 先保存状态 已便于画完圆再用
// ctx.beginPath(); //开始绘制
// //先画个圆
// ctx.arc(
// that.qrcode.HeadSize / 2 + that.qrcode.HeadPaddingLeft,
// that.qrcode.HeadSize / 2 + that.qrcode.HeadPaddingTop,
// that.qrcode.HeadSize / 2,
// 0,
// Math.PI * 2,
// false
// );
// ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
// ctx.drawImage(
// image.path,
// that.qrcode.HeadPaddingLeft,
// that.qrcode.HeadPaddingTop,
// that.qrcode.HeadSize,
// that.qrcode.HeadSize
// ); //绘制头像
// ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
// if (that.qrcode.IsShowQrCode == 0) {
// //二维码
// console.log("绘制二维码");
// uni.getImageInfo({
// // src: that.UserInfo.Photo,
// src: that.fenxqrcode,
// success: function (image) {
// ctx.drawImage(
// image.path,
// that.qrcode.QrCodePaddingLeft,
// that.qrcode.QrCodePaddingTop,
// that.qrcode.QrCodeSize,
// that.qrcode.QrCodeSize
// ); //绘制头像
// that.drawQrCode(ctx);
// },
// });
// } else {
// that.drawQrCode(ctx);
// }
// },
// });
// } else {
// if (that.qrcode.IsShowQrCode == 0) {
// console.log("绘制二维码");
// } else {
// that.drawQrCode(ctx);
// }
// }
},
});
},
drawTitle(ctx) {
let that = this;
let text = that.UserInfo.Name;
ctx.setFillStyle = that.qrcode.NickColor;
ctx.setFontSize(that.qrcode.NickSize);
ctx.fillText(
text,
that.qrcode.NickPaddingLeft,
that.qrcode.NickPaddingTop
);
ctx.restore();
},
drawQrCode(ctx) {
let that = this;
console.log("生成海报12");
setTimeout(() => {
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0,
destHeight: 1344.0,
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
},
},
that
);
});
}, 200);
},
preservation() {
uni.showLoading({
title: "正在生成",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
uni.authorize({
scope: "scope.writePhotosAlbum",
success: (res) => {
console.log("11111");
},
fail: (res) => {
uni.showModal({
content:
"检测到您没打开保存到相册权限，是否去设置打开？",
confirmText: "确认",
cancelText: "取消",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res);
if (res.authSetting["scope.writePhotosAlbum"]) {
that.preservation();
}
},
});
} else {
console.log("取消");
}
},
});
},
});
} else {
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300",
});
}
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
},
};
</script>
<style>
.qrcodeLiveStyle {
background: #f3f4f6;
display: flex;
flex-direction: column;
align-items: center;
}
.qrcodeLiveStyle .btn {
width: 80%;
height: 50px;
border-radius: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.qrcodeLiveStyle .imgbox {
width: 70%;
height: 515px;
margin-left: 15%;
position: relative;
background-repeat: no-repeat;
background-size: 100% 515px;
}
.qrcodeLiveStyle .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
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