Skip to content

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

调整部分样式

parent ca7feb03
Hide whitespace changes
Inline Side-by-side
Showing with 675 additions and 285 deletions
App.vue
View file @ 588687ad
......@@ -31,6 +31,7 @@ export default {
},
(res) => {
uni.setStorageSync("basedata", res.data);
uni.setStorageSync('navs', res.data.navbar.navs??[])
this.basedata = res.data;
this.$uiConfig.mainColor=res.data.mall.setting.mallStyle.main
this.$uiConfig.secondary=res.data.mall.setting.mallStyle.secondary
......
components/tabbar/index.vue
View file @ 588687ad
......@@ -158,15 +158,11 @@ export default {
}
// #endif
});
if(uni.getStorageSync("basedata")){
this.navs = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").navbar.navs
: [];
if(uni.getStorageSync("navs")){
this.navs = uni.getStorageSync("navs")??[];
}else{
setTimeout(()=>{
this.navs = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").navbar.navs
: [];
this.navs = uni.getStorageSync("navs")??[];
this.activeHandler();
},3000)
}
......
pages.json
View file @ 588687ad
......@@ -2,13 +2,12 @@
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
{
"pages": [{
"path": "pages/index/index",
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/cart/cart"
......@@ -64,9 +63,8 @@
// },
{
"root": "pages/balance",
"pages": [
{
"path": "recharge"
"pages": [{
"path": "recharge"
},
{
"path": "balance"
......@@ -88,6 +86,8 @@
},
"pages": [{
"path": "index"
}, {
"path": "share"
}]
},
{
......@@ -97,41 +97,40 @@
},
{
"path": "user-center",
"style": {
"navigationStyle": "custom"
}
"style": {
"navigationStyle": "custom"
}
}
]
},
{
"root": "pages/mySupplier",
"pages": [{
"path": "index/index",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "myBill"
}, {
"path": "billDetails"
}, {
"path": "mySupplierList"
}, {
"path": "myProduct"
}, {
"path": "supplierOrder"
}
]
},
{
"root": "pages/mySupplier",
"pages": [
{
"path": "index/index",
"style": {
"navigationStyle": "custom"
}
},{
"path":"myBill"
},{
"path":"billDetails"
},{
"path":"mySupplierList"
},{
"path":"myProduct"
},{
"path":"supplierOrder"
}
]
},
{
"root": "pages/share",
"pages": [{
"path": "index/index",
"style": {
"navigationStyle": "custom"
}
"style": {
"navigationStyle": "custom"
}
},
{
"path": "add/add"
......@@ -142,24 +141,24 @@
{
"path": "level/level"
},
{
"path": "level/level_t"
},
{
"path": "level/level_t"
},
{
"path": "examine"
},
{
"path": "buyVip/index"
},
{
"path": "vipBuyCommission/vipBuyCommission"
},
{
"path": "buyRecord/index"
},
{
"path": "buyInterest/index"
}
{
"path": "buyVip/index"
},
{
"path": "vipBuyCommission/vipBuyCommission"
},
{
"path": "buyRecord/index"
},
{
"path": "buyInterest/index"
}
]
},
{
......
pages/index/index.vue
View file @ 588687ad
......@@ -175,11 +175,26 @@ export default {
//兼容之前小程序的调转
this.getjump(options.scene);
}
// #ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
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();
let set = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").mall.setting
......@@ -196,6 +211,7 @@ export default {
this.isShowBack();
uni.showNavigationBarLoading();
},
// #ifdef MP-WEIXIN
onShareTimeline() {
setTimeout(() => {
console.log("分享调用");
......@@ -227,6 +243,7 @@ export default {
imageUrl: this.setting.share_pic ? this.setting.share_pic : "",
};
},
// #endif
onShow() {
setTimeout(() => {
uni.hideNavigationBarLoading();
......@@ -236,15 +253,25 @@ export default {
},
methods: {
updateuserinfo(msg){
this.request2(
{
url: "/api/MemberUser/SetMemberPhoto",
data: msg,
},
(res) => {
//静默处理不做任何提示
},
(error) => {}
);
},
goback() {
uni.navigateBack({
delta: 1,
});
},
isShowBack() {
let navs = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").navbar.navs
: [];
let navs = uni.getStorageSync("navs") ?? [];
if (navs) {
let t = getCurrentPages();
let query = t[t.length - 1].__displayReporter.query;
......@@ -255,10 +282,10 @@ export default {
if (queryString != "") {
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;
navs.forEach((x, i) => {
if (x.url == this.crtPath) {
if (x.url == crtPath) {
isExsit = true;
}
});
......@@ -304,6 +331,9 @@ export default {
(res) => {
this.indexPageData = res.data.home_pages.navs[0].template.data;
this.myPageData = res.data;
if (res.data.navbar.navs) {
uni.setStorageSync("navs", res.data.navbar.navs);
}
uni.setStorageSync("basedata", res.data);
if (res.data.home_pages.title != "") {
if (this.pageId == 0) {
......@@ -344,7 +374,6 @@ export default {
},
formatBg() {
this.myPageData.home_pages.navs.forEach((y) => {
y.template.data.forEach((x) => {
if (x.id == "background") {
let t = "";
......@@ -379,10 +408,10 @@ export default {
}
// y.templateBg +="padding-bottom:"+(this.$uiConfig.is_bang ? '88px' : '60px')+";box-sizing: border-box;";
}
});
if(!y.templateBg){
y.templateBg={titleColor:"#000"};
}
});
if (!y.templateBg) {
y.templateBg = { titleColor: "#000" };
}
});
},
getReceive() {
......@@ -443,7 +472,6 @@ export default {
border-bottom: 12px solid black;
position: fixed;
right: 65px;
}
.index-title {
line-height: 45px !important;
......
pages/live/index.vue
View file @ 588687ad
<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>
<template
v-if="g.length > 0"
>
<view style="
<template v-if="g.length > 0">
<view
style="
height: calc(100vh - 50px);
width: calc(100vw - 20px);
margin-left: 10px;
overflow: hidden;
padding-top: 10px;
">
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' ,}"
>
<view class="u-good-list" >
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci" >
<view class="good" @click="clickHandler(cx)">
<!-- <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="livebtn" v-if='cx.live_status==104 || cx.live_status==105|| cx.live_status==106 '></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 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">
<u-avatar :src="cx.anchor_img" size="30" ></u-avatar>
<Text style="font-size: 11px;margin-left: 5px;">{{cx.anchor_name}}</Text>
</view>
<view class="good-name">{{ cx.name }}</view>
</view>
<!-- 直播的状态 -->
<view class="liveState" v-if='cx.live_status==101' style=" background-image: linear-gradient(to right,#FF8FB9,#FF002A);">
<Text>直播中</Text>
</view>
<view class="liveState" v-if='cx.live_status==102' style="background: #FFFFFF;color: #111111;">
<Text>未开始</Text>
</view>
<view class="liveState" v-if='cx.live_status==103' >
<Text>已结束</Text>
</view>
<view class="liveState" v-if='cx.live_status==104' >
<Text>禁播</Text>
</view>
<view class="liveState" v-if='cx.live_status==105' >
<Text>暂停</Text>
</view>
<view class="liveState" v-if='cx.live_status==106' >
<Text>异常</Text>
</view>
<view class="liveState" v-if='cx.live_status==107' >
<Text>已过期</Text>
</view>
</view>
</u-col>
</u-row>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</scroll-view>
</view>
"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' ,}"
>
<view class="u-good-list">
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci">
<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: 'cover' ,'background-repeat': 'no-repeat'}"
>
<!-- 播放按钮 -->
<view
class="livebtn"
v-if="cx.live_status==104 || cx.live_status==105|| cx.live_status==106 "
></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
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">
<u-avatar :src="cx.anchor_img" size="30"></u-avatar>
<Text style="font-size: 11px;margin-left: 5px;">{{cx.anchor_name}}</Text>
</view>
<view class="good-name">{{ cx.name }}</view>
</view>
<!-- 直播的状态 -->
<view
class="liveState"
v-if="cx.live_status==101"
style=" background-image: linear-gradient(to right,#FF8FB9,#FF002A);"
>
<Text>直播中</Text>
</view>
<view
class="liveState"
v-if="cx.live_status==102"
style="background: #FFFFFF;color: #111111;"
>
<Text>未开始</Text>
</view>
<view class="liveState" v-if="cx.live_status==103">
<Text>已结束</Text>
</view>
<view class="liveState" v-if="cx.live_status==104">
<Text>禁播</Text>
</view>
<view class="liveState" v-if="cx.live_status==105">
<Text>暂停</Text>
</view>
<view class="liveState" v-if="cx.live_status==106">
<Text>异常</Text>
</view>
<view class="liveState" v-if="cx.live_status==107">
<Text>已过期</Text>
</view>
</view>
</u-col>
</u-row>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</scroll-view>
</view>
</template>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<tabbars></tabbars>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
<tabbars></tabbars>
</view>
</template>
<script>
import auth from "@/components/auth/index.vue";
import tabbars from '@/components/tabbar/index';
import auth from "@/components/auth/index.vue";
import tabbars from "@/components/tabbar/index";
export default {
components: {
tabbars,
auth
},
components: {
tabbars,
auth,
},
data() {
return {
mc: "",
secondary: "",
pageTitle: "直播列表",
contentHeight: 0,
g:[],
msg:{
pageIndex: 1,
pageSize:10,
contentHeight: 0,
g: [],
msg: {
pageIndex: 1,
pageSize: 10,
},
page_count: 1,
status: "loadmore",
......@@ -112,31 +138,36 @@ export default {
loading: "努力加载中",
nomore: "没有更多了",
},
u:{},
showAuth:false
u: {},
showAuth: false,
};
},
onLoad(option) {
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
let c = this.$uiConfig.is_bang ? 80 : 52;
this.contentHeight = this.$utils.calcContentHeight(c-40) + "px";
let c = this.$uiConfig.is_bang ? 80 : 52;
this.contentHeight = this.$utils.calcContentHeight(c - 40) + "px";
this.initPage();
uni.showNavigationBarLoading();
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
}else{
this.init();
}
uni.showNavigationBarLoading();
if (option.user_id) {
uni.setStorageSync("pid", { pid: options.user_id });
}
this.u = uni.getStorageSync("mall_UserInfo");
if (!this.u) {
this.u = {
nickName: "未登录",
avatarUrl: "",
};
this.showAuth = true;
} else {
this.init();
}
},
methods: {
goshare(img){
console.log(img)
uni.navigateTo({url: '/pages/live/share?pic='+img});
},
initPage() {
let currentPages = getCurrentPages();
let u = "/" + currentPages[currentPages.length - 1].route;
......@@ -152,124 +183,130 @@ export default {
title: this.pageTitle,
});
},
clickHandler(cx){
let uid=uni.getStorageSync('mall_UserInfo') ?uni.getStorageSync('mall_UserInfo').UserId:0;
let customParams = encodeURIComponent(JSON.stringify({user_id: uid }))
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}&custom_params=${customParams}`
})
},
clickHandler(cx) {
let uid = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserId
: 0;
let customParams = encodeURIComponent(JSON.stringify({ user_id: uid }));
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}&custom_params=${customParams}`,
});
},
init() {
uni.showLoading({
title: '加载中'
});
this.request2(
{
url: '/api/LiveHouse/GetLiveHouseList',
data: this.msg
},
res => {
uni.hideLoading();
uni.hideNavigationBarLoading();
if(res.resultCode==1){
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
uni.showLoading({
title: "加载中",
});
this.request2(
{
url: "/api/LiveHouse/GetLiveHouseList",
data: this.msg,
},
(res) => {
uni.hideLoading();
uni.hideNavigationBarLoading();
if (res.resultCode == 1) {
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
// this.showAuth = false;
this.init();
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
this.init()
},
//关闭登录窗口
gbAuth(){
this.showAuth=false;
},
},
};
</script>
<style>
.liveStyle{
background: #f3f4f6;
}
.liveStyle .u-good-list .good {
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
height: 243px;
position: relative;
}
.liveStyle .u-good-list .good .good-img {
width: 100%;
height: 243px;
display: block;
position: relative;
}
.liveStyle .u-good-list .good .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 13px;
margin: 7px 10px;
height: 18px;
}
.liveStyle .u-good-list .good .good-info {
display: flex;
margin: 7px 10px;
margin-top: 0;
flex-direction: row;
align-items: center;
}
.liveStyle .u-good-list .liveState{
width: 50px;
height: 20px;
position: absolute;
left: 0;
top:5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
font-size: 11px;
color: #FFFFFF;
text-align: center;
}
.liveStyle {
background: #f3f4f6;
}
.liveStyle .u-good-list .good {
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
height: 243px;
position: relative;
}
.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%;
height: 243px;
display: block;
position: relative;
}
.liveStyle .u-good-list .good .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 13px;
margin: 7px 10px;
height: 18px;
}
.liveStyle .u-good-list .good .good-info {
display: flex;
margin: 7px 10px;
margin-top: 0;
flex-direction: row;
align-items: center;
}
.liveStyle .u-good-list .liveState {
width: 50px;
height: 20px;
position: absolute;
left: 0;
top: 5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
.liveStyle .livebtn{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #999999;
opacity: 0.3;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
font-size: 11px;
color: #ffffff;
text-align: center;
}
}
.liveStyle .livebtn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #999999;
opacity: 0.3;
}
</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