Skip to content

M
mallapp
Commit 65a1bba7 authored by zhengke's avatar zhengke
Browse files
Options

增加

parent a28625db
Hide whitespace changes
Inline Side-by-side
Showing with 555 additions and 181 deletions
pages.json
View file @ 65a1bba7
......@@ -447,6 +447,8 @@
"path":"personal/order-commit-details"
},{
"path":"commentList"
},{
"path":"share_qrcode"
}
]
},
......
pages/reserve/designerDetail.vue
View file @ 65a1bba7
......@@ -4,9 +4,10 @@
height: 100vh;
background: #FFFFFF;
margin-bottom: 80px;
}
.designerDetail .d-t-box{
.designerDetail .d-t-box {
width: 100%;
display: flex;
flex-direction: row;
......@@ -19,16 +20,24 @@
position: relative;
font-family: aa;
}
.designerDetail .tx{
.designerDetail .tx {
position: relative;
}
.designerDetail .bj{
width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: RGBA(114, 113, 120, 0.3);
.designerDetail .bj {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.designerDetail .tx-sex{
.designerDetail .tx-sex {
width: 25px;
height: 25px;
border-radius: 12.5px;
......@@ -36,51 +45,61 @@
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
bottom: 10px;
}
.designerDetail .tx-c{
.designerDetail .tx-c {
width: 1;
flex: 1;
margin-left: 10px;
z-index:1;
}
.designerDetail .tx-r{
.designerDetail .tx-r {
width: 47px;
height: 34px;
text-align: right;
}
.designerDetail .tx-c-t{
.designerDetail .tx-c-t {
display: flex;
flex-direction: row;
align-items: center;
color: #FFF;
}
.designerDetail .superone{
.designerDetail .superone {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.designerDetail .tx-cc{
.designerDetail .tx-cc {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.designerDetail .tx-cc-l{
width: 1;flex: 1;
.designerDetail .tx-cc-l {
width: 1;
flex: 1;
margin-top: 8px;
}
.designerDetail .shuxian{
.designerDetail .shuxian {
width: 1px;
height: 9px;
background: #FFF;margin: 0 8px;
background: #FFF;
margin: 0 8px;
}
.designerDetail .gl-left-item{
.designerDetail .gl-left-item {
padding: 2px 4px;
border-radius: 2px;
font-size: 10px;
......@@ -88,23 +107,27 @@
margin-right: 5px;
margin-bottom: 5px;
}
.designerDetail .d-info{
.designerDetail .d-info {
width: 100%;
padding: 15px;
font-size: 13px;
color: #111111;
font-family: aa;
}
.designerDetail .d-i-item{
.designerDetail .d-i-item {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.designerDetail .serve{
.designerDetail .serve {
width: 100%;
}
.designerDetail .title{
.designerDetail .title {
width: 100%;
height: 45px;
font-size: 16px;
......@@ -113,7 +136,8 @@
padding: 0 15px;
line-height: 45px;
}
.designerDetail .title-t{
.designerDetail .title-t {
width: 100%;
height: 45px;
font-size: 16px;
......@@ -125,22 +149,28 @@
align-items: center;
justify-content: space-between;
}
.designerDetail .setmeal-box{
display: flex;width:100%;flex-direction: row;overflow-x: auto;
.designerDetail .setmeal-box {
display: flex;
width: 100%;
flex-direction: row;
overflow-x: auto;
padding: 15px 0;
border-bottom: 1px solid #E2E2E2;
}
.designerDetail .setmeal-item{
.designerDetail .setmeal-item {
width: 200px;
/* height: 98px; */
background: #FFF;
border-radius: 6px;
box-shadow:0 6px 10px 1px #F2F2F2;
box-shadow: 0 6px 10px 1px #F2F2F2;
overflow: hidden;
}
.designerDetail .setmeal-item-top{
.designerDetail .setmeal-item-top {
width: 100%;
height: 75px;
background: #221818;
......@@ -150,17 +180,19 @@
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.designerDetail .setmeal-pl{
.designerDetail .setmeal-pl {
position: absolute;
top:28.5px;
top: 28.5px;
width: 18px;
height: 18px;
border-radius: 9px;
background: #FFF;
}
.designerDetail .setmeal-item-bottom{
.designerDetail .setmeal-item-bottom {
display: flex;
align-items: center;
justify-content: center;
......@@ -170,33 +202,38 @@
background: #FAF8F9;
font-family: aa;
}
.designerDetail .setmeal-name{
.designerDetail .setmeal-name {
width: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.designerDetail .setmeal-price{
.designerDetail .setmeal-price {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.designerDetail .d-goods{
.designerDetail .d-goods {
display: flex;
flex-direction: column;
padding: 0 15px 10px;
}
.designerDetail .d-goods-item{
.designerDetail .d-goods-item {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 0;
}
.designerDetail .d-goods-item-r{
.designerDetail .d-goods-item-r {
width: calc(100vw - 172px);
height: 68px;
display: flex;
......@@ -204,21 +241,24 @@
justify-content: space-between;
margin-left: 15px;
}
.designerDetail .item-r-title{
.designerDetail .item-r-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.designerDetail .item-r-b{
.designerDetail .item-r-b {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.designerDetail .btn{
.designerDetail .btn {
width: 100%;
padding: 15px;
position: fixed;
......@@ -227,7 +267,8 @@
background: #FFF;
z-index: 99;
}
.designerDetail .btn-box{
.designerDetail .btn-box {
width: 100%;
height: 45px;
border-radius: 6px;
......@@ -237,58 +278,71 @@
font-size: 14px;
color: #FFFFFF;
}
.designerDetail .comment2 {
background: #fff;
font-family: aa;
padding: 15px;
background: #fff;
font-family: aa;
padding: 15px;
}
.designerDetail .comment .content {
display: flex;
flex-direction: column;
margin-bottom: 15px;
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.designerDetail .comment .content .u-box {
display: flex;
margin-bottom: 10px;
align-items: center;
display: flex;
margin-bottom: 10px;
align-items: center;
}
.designerDetail .comment .content .u-box .user {
flex: 1;
font-size: 13px;
color: #111111;
font-weight: bold;
align-items: center;
display: flex;
flex: 1;
font-size: 13px;
color: #111111;
font-weight: bold;
align-items: center;
display: flex;
}
.designerDetail .comment .content .u-box .timer {
font-size: 12px;
color: #999999;
text-align: right;
font-size: 12px;
color: #999999;
text-align: right;
}
.designerDetail .comment .content .u-box .ucontent {
font-size: 11px;
color: #000;
margin-top: 10px;
font-size: 11px;
color: #000;
margin-top: 10px;
}
.designerDetail .comment .content .u-box .plimg{
.designerDetail .comment .content .u-box .plimg {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10px;
}
.designerDetail .plimg-item{
.designerDetail .plimg-item {
margin-right: 3px;
/* margin-bottom: 3px; */
}
.designerDetail .reply{
.designerDetail .reply {
width: 100%;
padding: 10px;
background: #F5F6F7;
border-radius: 3px;
margin-top: 10px;
}
.designerDetail .tx_share{
position: absolute;
right:15px;
top:65px;
}
</style>
<template>
......@@ -305,14 +359,8 @@
<view class="tx-c">
<view class="tx-c-t">
<view style="font-size: 18px;font-weight: bold;max-width: 150px;" class="superone">{{personal.Name}}</view>
<u-rate
:current="personal.Score!=null &&personal.Score>0?personal.Score:'5'"
active-color="#FEC471" inactive-color="#DDDDDD"
active-icon="star"
inactive-icon="star-o"
size="26"
:disabled="true"
></u-rate>
<u-rate :current="personal.Score!=null &&personal.Score>0?personal.Score:'5'" active-color="#FEC471"
inactive-color="#DDDDDD" active-icon="star" inactive-icon="star-o" size="26" :disabled="true"></u-rate>
<text style="margin-left: 3px;font-size: 13px;">{{personal.Score?personal.Score.toFixed(1):'5.0'}}</text>
</view>
<view class="tx-cc">
......@@ -329,12 +377,14 @@
{{x}}
</view>
</view>
</view>
<view class="tx-r" @click="gophone">
<image mode="aspectFill" style="width: 30px;height: 30px;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png'/>
<view class="tx-r" @click="gophone" style="position: relative;top:-20px;">
<image mode="aspectFill" style="width: 25px;height: 25px;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png' />
</view>
</view>
<view class="tx_share" @click="goShare">
<image mode="aspectFill" style="width: 30px;height: 30px;" src="../../static/images/share.png"></image>
</view>
</view>
</view>
<view class="d-info">
......@@ -347,19 +397,18 @@
<view style="display: flex;flex-direction: column;">
{{personal.StoreName}}
<view style="display: flex;flex-direction: row;align-items: center;color: #1B1D1E;margin-top: 8px;">
<u-icon name="location" color="#CCCCCC" size="23" style='margin-right: 5px;'></u-icon>
<u-icon name="location" color="#CCCCCC" size="23" style='margin-right: 5px;'></u-icon>
{{personal.StoreAddress}}
</view>
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;" ></view>
<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
<view class="sticky">
<u-sticky>
<view class="store-tabs">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mc"></u-tabs>
</view>
</view>
</u-sticky>
</view>
<view class="serve">
......@@ -372,7 +421,6 @@
<view style="font-size: 11px;color: rgba(239, 220, 203, 0.6);" class="setmeal-name">{{cl.Describe}}</view>
<view class="setmeal-price">
<text style="font-size: 13px;">核销次数:{{cl.TotalNum}}次</text>
</view>
<view class="setmeal-pl" style="left: -9px;"></view>
<view class="setmeal-pl" style="right: -9px;"> </view>
......@@ -386,7 +434,7 @@
<view class="title">TA可服务的商品<text style="font-size: 11px;color: #1B1D1E;">({{personal.goodsList.length}})</text></view>
<view class="d-goods">
<view class="d-goods-item" v-for="(c, j) in personal.goodsList" :key="c" @click="gogoods(c)">
<image style="width: 125px;height: 70px;border-radius: 4px;" mode="aspectFill" :src="c.CoverImage"/>
<image style="width: 125px;height: 70px;border-radius: 4px;" mode="aspectFill" :src="c.CoverImage" />
<view class="d-goods-item-r">
<view class="item-r-title" style="font-size: 14px;color: #1B1D1E;">{{c.Name}}</view>
<view class="item-r-title" style="font-size: 12px;color: #999999;">{{c.SubName}}</view>
......@@ -401,9 +449,9 @@
</view>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;" ></view>
<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
<view class="comment" style="padding-bottom: 80px;">
<view class="title-t" >
<view class="title-t">
<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;" @click="gocomment()">
评价{{count>0?'('+count+')':''}}
<u-icon name="arrow" :size="30" color="#666666"></u-icon>
......@@ -411,38 +459,31 @@
</view>
<view class="comment2 u-skeleton-rect">
<view class="content" v-for="(item, index) in comments" :key='index'>
<view class="u-box">
<view class="user">
<u-avatar :src="item.UserPhotoPath" :size="50"></u-avatar>
<text style="margin:0 10px;overflow: hidden; white-space: nowrap;max-width: 200rpx;text-overflow: ellipsis;margin-bottom: 2px;">{{ item.UserName }}</text>
<u-rate
:current="item.CommentScore"
active-color="#FFC86D"
inactive-color="#b2b2b2"
active-icon="star"
inactive-icon="star-o"
size="26"
:disabled="true"
></u-rate>
</view>
<view class="timer">{{ item.CreateDate }}</view>
</view>
<view class="ucontent" style="line-height: 22px;">{{ item.Content }}</view>
<view class="plimg">
<image v-for="(x, j) in item.CommentImgList" :key="j" class="plimg-item" mode="aspectFill" :src="x"
@click="previewImage2(j,item.CommentImgList)" :style="{'width':san,'height':san}" />
</view>
<view class="reply" v-if="item.Reply!=''">
<view style="font-size: 12px;color: #121212;">回复:</view>
<view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{item.Reply}}</view>
</view>
<view class="u-box">
<view class="user">
<u-avatar :src="item.UserPhotoPath" :size="50"></u-avatar>
<text style="margin:0 10px;overflow: hidden; white-space: nowrap;max-width: 200rpx;text-overflow: ellipsis;margin-bottom: 2px;">{{ item.UserName }}</text>
<u-rate :current="item.CommentScore" active-color="#FFC86D" inactive-color="#b2b2b2" active-icon="star"
inactive-icon="star-o" size="26" :disabled="true"></u-rate>
</view>
<view class="timer">{{ item.CreateDate }}</view>
</view>
<view class="ucontent" style="line-height: 22px;">{{ item.Content }}</view>
<view class="plimg">
<image v-for="(x, j) in item.CommentImgList" :key="j" class="plimg-item" mode="aspectFill" :src="x" @click="previewImage2(j,item.CommentImgList)"
:style="{'width':san,'height':san}" />
</view>
<view class="reply" v-if="item.Reply!=''">
<view style="font-size: 12px;color: #121212;">回复:</view>
<view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{item.Reply}}</view>
</view>
</view>
</view>
<view v-if="comments.length==0" style="width: 100%;height: 50px;line-height: 50px;text-align: center;" >
<view v-if="comments.length==0" style="width: 100%;height: 50px;line-height: 50px;text-align: center;">
暂无评价~
</view>
</view>
<view class="btn">
<view class="btn-box" :style="{'background':mc}" @click="gosubscribe">
......@@ -457,41 +498,44 @@
import auth from "@/components/auth/index";
export default {
components: {
auth,
auth,
},
data() {
return {
pageTitle: "服务人员详情",
mc: "",
loading: false,
ID:0,
storeId:0,
personal:{},
showAuth:false,
current:0,
submitOrder:false,
list:[
{name: '服务项目'},
{name: '评价'},
ID: 0,
storeId: 0,
personal: {},
showAuth: false,
current: 0,
submitOrder: false,
list: [{
name: '服务项目'
},
{
name: '评价'
},
],
san: '100px',
allCoupon:[],
comments:[],
u:{},
count:0,
allCoupon: [],
comments: [],
u: {},
count: 0,
};
},
onLoad(option) {
this.mc = this.$uiConfig.mainColor;
if(option && option.ID){
if (option && option.ID) {
this.ID = option.ID
}
if(option && option.storeId){
if (option && option.storeId) {
this.storeId = option.storeId
}
this.getDetail()//服务人员详情
this.getAllCPList();
this.getDetail() //服务人员详情
this.getAllCPList();
this.getAppCommentList()
},
mounted() {
......@@ -499,111 +543,123 @@
title: this.pageTitle,
});
let windowWidth = this.$utils.SystemInfo().windowWidth
this.san=(windowWidth - 30-9) / 3 + 'px'
this.san = (windowWidth - 30 - 9) / 3 + 'px'
},
methods: {
getDetail(){
getDetail() {
uni.showLoading({
title: '加载中'
});
this.request2({
url: '/api/AppletStores/GetServicePersonalModel',
data: {ID:this.ID}
data: {
ID: this.ID
}
},
res => {
if (res.resultCode == 1) {
this.loading = true
this.personal=res.data
this.personal = res.data
}
uni.hideLoading();
}
);
},
gocomment(){//评论列表
gocomment() { //评论列表
uni.navigateTo({
url: "/pages/reserve/commentList?StoreId="+this.storeId+'&ServicePersonalId='+this.ID
url: "/pages/reserve/commentList?StoreId=" + this.storeId + '&ServicePersonalId=' + this.ID
})
},
getAllCPList(){//获取门店套餐卡
getAllCPList() { //获取门店套餐卡
this.request2({
url: '/api/AppletStores/GetAllCouponPageList',
data: {pageIndex:1,pageSize:999,StoreId:this.storeId}
data: {
pageIndex: 1,
pageSize: 999,
StoreId: this.storeId
}
},
res => {
if (res.resultCode == 1) {
this.allCoupon = res.data.pageData
}
}
);
},
getAppCommentList(){
getAppCommentList() {
this.request2({
url: '/api/AppletStores/GetAppletGoodsCommentPageList',
data: {pageIndex:1,pageSize:5,StoreId:this.storeId,GoodsId:0,ServicePersonalId:this.ID}
data: {
pageIndex: 1,
pageSize: 5,
StoreId: this.storeId,
GoodsId: 0,
ServicePersonalId: this.ID
}
},
res => {
if (res.resultCode == 1) {
this.comments = res.data.pageData;
this.count=res.data.count
this.count = res.data.count
}
}
);
},
change(e){
this.current= e;
change(e) {
this.current = e;
switch (e) {
case 0:
uni.createSelectorQuery().in(this).select(".serve").boundingClientRect(data=>{//目标节点
uni.createSelectorQuery().in(this).select(".serve").boundingClientRect(data => { //目标节点
uni.pageScrollTo({
scrollTop: data.top-40
scrollTop: data.top - 40
})
}).exec();
}).exec();
break;
case 1:
uni.createSelectorQuery().in(this).select(".comment").boundingClientRect(data=>{//目标节点
uni.createSelectorQuery().in(this).select(".comment").boundingClientRect(data => { //目标节点
uni.pageScrollTo({
scrollTop: data.top-40
scrollTop: data.top - 40
})
}).exec();
break;
}
},
gophone(){
gophone() {
uni.makePhoneCall({
phoneNumber: this.personal.Telephone //仅为示例
phoneNumber: this.personal.Telephone //仅为示例
});
},
gocoupon(item){//优惠券详情
gocoupon(item) { //优惠券详情
uni.navigateTo({
url: "/pages/reserve/personal/couponDetail?ID="+item.CouponId,
url: "/pages/reserve/personal/couponDetail?ID=" + item.CouponId,
})
},
gogoods(item){//商品详情
gogoods(item) { //商品详情
uni.navigateTo({
url: "/pages/reserve/goodsDetails?GoodsId="+item.Id,
url: "/pages/reserve/goodsDetails?GoodsId=" + item.Id,
})
},
gosubscribe(){
gosubscribe() {
this.u = uni.getStorageSync("mall_UserInfo");
if (this.u) {
uni.navigateTo({
url: "/pages/reserve/subscribe?id="+this.storeId,
})
uni.navigateTo({
url: "/pages/reserve/subscribe?id=" + this.storeId,
})
} else {
this.showAuth = true;
this.showAuth = true;
}
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
this.u = uni.getStorageSync("mall_UserInfo");
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
this.showAuth = false;
},
//图片预览
previewImage2(index, images) {
......@@ -612,8 +668,12 @@
current: index,
});
},
//跳转至生成海报
goShare(){
uni.navigateTo({
url: "/pages/reserve/share_qrcode?ServiceLogo=" + this.personal.ServiceLogo+'&Name='+this.personal.Name
})
}
},
};
</script>
pages/reserve/share_qrcode.vue 0 → 100644
View file @ 65a1bba7
<template>
<view class="qrcodeStyle" :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: '',
ServiceLogo:'', //传递头像
Name:'' //传递name
}
},
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(options) {
if (options) {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.ServiceLogo = options.ServiceLogo;
this.Name = options.Name;
this.init()
}
},
onReady() {
},
mounted() {
},
methods: {
init() {
uni.showNavigationBarLoading();
this.request2({
url: '/api/AppletUser/GetFenXiaoPoster',
data: {}
},
(res) => {
uni.hideNavigationBarLoading()
this.qrcode = res.data;
console.log(this.qrcode,'qrcode');
this.getWeiXinQRCode()
}
);
},
getWeiXinQRCode() {
let that = this
uni.showNavigationBarLoading();
let SmallShopId = that.UserInfo.SmallShopId ? that.UserInfo.SmallShopId : 0;
if (SmallShopId == 0) {
SmallShopId = that.UserInfo.UserSmallShopId ? that.UserInfo.UserSmallShopId : 0;
}
that.request2({
url: '/api/AppletUser/GetWeiXinQRCodeForApplet',
data: {
Path: '/pages/index/index?user_id=' + that.UserInfo.UserId + '&SmallShopId=' + SmallShopId,
With: that.qrcode.QrCodeSize,
}
},
(res) => {
console.log(res,'weixin数据');
uni.hideNavigationBarLoading()
that.fenxqrcode = that.host2 + res.data;
// that.fenxqrcode = 'https://mallapi.oytour.com/upfile/temporary/864369a3-8da8-4735-bcc8-a2dfe5c6f357.jpg'
console.log(that.fenxqrcode,'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.qrcode.PosterBgImg,
success: function(image) {
console.log('绘制')
ctx.drawImage(image.path, 0, 0, 750, 1344); //绘制图
if (that.qrcode.IsShowNick == 0) {
console.log('绘制文字')
that.drawTitle(ctx); //绘制文字
}
if (that.qrcode.IsShowHead == 0) {
uni.getImageInfo({ //头像
src: that.fenxqrcode,
success: function(image) {
console.log(image,'imagesssssssss');
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.ServiceLogo,
success: function(image) {
if (that.qrcode.QrCodeType == 0) {
ctx.arc(that.qrcode.QrCodeSize / 2 + that.qrcode.QrCodePaddingLeft, that.qrcode.QrCodeSize / 2 +
that.qrcode.QrCodePaddingTop, that.qrcode.QrCodeSize / 2, 0, Math.PI * 2, false);
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
}
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('进入与');
console.log(that.fenxqrcode,'that.fenxqrcode2');
console.log('绘制二维码11111')
uni.getImageInfo({ //头像
src: that.fenxqrcode,
success: function(image) {
if (that.qrcode.QrCodeType == 0) {
ctx.arc(that.qrcode.QrCodeSize / 2 + that.qrcode.QrCodePaddingLeft, that.qrcode.QrCodeSize / 2 + that.qrcode
.QrCodePaddingTop, that.qrcode.QrCodeSize / 2, 0, Math.PI * 2, false);
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
}
ctx.drawImage(image.path, that.qrcode.QrCodePaddingLeft, that.qrcode.QrCodePaddingTop, that.qrcode.QrCodeSize,
that.qrcode.QrCodeSize); //绘制二维码
that.drawQrCode(ctx)
},
});
} else {
that.drawQrCode(ctx)
}
}
},
});
},
drawTitle(ctx) {
let that = this
let text = that.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>
.qrcodeStyle {
background: #f3f4f6;
display: flex;
flex-direction: column;
align-items: center;
}
.qrcodeStyle .btn {
width: 80%;
height: 50px;
border-radius: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.qrcodeStyle .imgbox {
width: 70%;
height: 515px;
margin-left: 15%;
position: relative;
background-repeat: no-repeat;
background-size: 100% 515px;
}
.qrcodeStyle .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -1344px;
left: -750px;
}
</style>
\ 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