Compare commits
17 Commits
master
...
feature-1.
| Author | SHA1 | Date |
|---|---|---|
da da
|
744e8358af | 3 years ago |
 Penny
|
3763aaa1bb | 3 years ago |
|
da da
|
bf2b4cc291 | 3 years ago |
|
Penny
|
144f939c7f | 3 years ago |
 helming
|
97f5fe8474 | 3 years ago |
|
helming
|
579c3e4d3f | 3 years ago |
 langz
|
acb3415327 | 3 years ago |
|
langz
|
3f8a77f17e | 3 years ago |
|
langz
|
5efbe3e8c7 | 3 years ago |
|
helming
|
5dd21ebe1e | 3 years ago |
|
helming
|
a0edda8924 | 3 years ago |
|
helming
|
44c49581bc | 3 years ago |
|
Penny
|
1e5d0cfe0f | 3 years ago |
|
da da
|
9765367638 | 3 years ago |
|
Penny
|
4429629221 | 3 years ago |
|
Penny
|
45be20b84b | 3 years ago |
|
Penny
|
490805ea27 | 3 years ago |
17 changed files with 1739 additions and 866 deletions
@ -0,0 +1,276 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="top-box"> |
|||
<view class="love-title"> |
|||
|
|||
</view> |
|||
<view class="top-img-box"> |
|||
<view v-if="!finishDraw" class="loading"> |
|||
<view class="loading-icon"> |
|||
<uni-icons type="spinner-cycle" size="40"></uni-icons> |
|||
</view> |
|||
<view class="loading-tips"> |
|||
Ai正在拼命绘制中..... |
|||
</view> |
|||
</view> |
|||
<view v-if="finishDraw" class="img-item-box"> |
|||
<img class="img-item" :src="`data:image/png;base64,${resultImg[0]}`" > |
|||
<img class="img-item" :src="`data:image/png;base64,${resultImg[1]}`" > |
|||
<view class="heart-icon"></view> |
|||
</view> |
|||
</view> |
|||
<view v-if="finishDraw" class="button-box"> |
|||
<view class="save-button" @click="clickSave(resultImg[0])"></view> |
|||
<view class="save-button" @click="clickSave(resultImg[1])"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import base64ToImg from '@/utils/base64Utils'; |
|||
import { textToImgLove} from '@/api/paint.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
resultImg: [], |
|||
finishDraw: false |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
//接收上一个页面传来的绘画参数 |
|||
const paintData = JSON.parse(options.data); |
|||
// console.log('paintData',paintData); |
|||
|
|||
// let paintData = { |
|||
// appType: 0, |
|||
// painterId: 1657690826066698200, |
|||
// painterName: "LangZ", |
|||
// platform: 1, |
|||
// prompt: "白色衣服", |
|||
// scenePrompt: "咖啡馆" |
|||
// } |
|||
const that = this |
|||
textToImgLove(paintData).then(res =>{ |
|||
if(res.data.code === 200){ |
|||
uni.hideLoading(); |
|||
console.log('res',res); |
|||
that.resultImg = res.data.data |
|||
that.finishDraw = true |
|||
console.log(that.resultImg); |
|||
}else{ |
|||
uni.navigateBack({ |
|||
success() { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
methods: { |
|||
//转义base64图片 |
|||
clickSave(url){ |
|||
let str = "data:image/png;base64,"+url; |
|||
base64ToImg(str,res =>{ |
|||
console.log('解析出的图片路径为:',res) |
|||
// this.saveUrl = res; |
|||
this.download(res) |
|||
//将complate的css底图改成此 |
|||
}); |
|||
}, |
|||
// 下载 |
|||
download(url) { |
|||
// url = this.base64ToPath(url) |
|||
let that = this; |
|||
//console.log('即将下载的图片为',that.transImg) |
|||
uni.showLoading({ |
|||
title: '正在保存图片...', |
|||
success() { |
|||
//获取用户的当前设置。获取相册权限 |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
//如果没有相册权限 |
|||
if (!res.authSetting["scope.album"]) { |
|||
//向用户发起授权请求 |
|||
uni.authorize({ |
|||
scope: "scope.album", |
|||
success: () => { |
|||
uni.saveImageToPhotosAlbum({ |
|||
//图片路径，不支持网络图片路径 |
|||
filePath: url, |
|||
success: (res) => { |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
return uni.showToast({ |
|||
title: res.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
complete: (res) => { |
|||
uni.hideLoading(); |
|||
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|||
return uni.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
return uni.showToast({ |
|||
title: "保存成功！", |
|||
icon: 'none', |
|||
success() { |
|||
|
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
//授权失败 |
|||
fail: () => { |
|||
uni.hideLoading(); |
|||
uni.showModal({ |
|||
title: "您已拒绝获取相册权限", |
|||
content: "是否进入权限管理，调整授权？", |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
|||
uni.openSetting({ |
|||
success: (res) => { |
|||
|
|||
}, |
|||
}); |
|||
} else if (res.cancel) { |
|||
return uni.showToast({ |
|||
title: "已取消！", |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} else { |
|||
//如果已有相册权限，直接保存图片到系统相册 |
|||
uni.saveImageToPhotosAlbum({ |
|||
filePath: url, |
|||
success: (res) => { |
|||
console.log('有权限下载图片结果为',res) |
|||
console.log('333333') |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
return uni.showToast({ |
|||
title: res.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
//无论成功失败都走的回调 |
|||
complete: (res) => { |
|||
uni.hideLoading(); |
|||
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|||
return uni.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
}else{ |
|||
return uni.showToast({ |
|||
title: "保存成功！", |
|||
duration: 2000, |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
fail: (res) => {}, |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 20px 0px; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background-color: #faf0f3; |
|||
.top-box { |
|||
.love-title { |
|||
margin-top: 30rpx; |
|||
margin-left: 40rpx; |
|||
width: 677rpx; |
|||
height: 245rpx; |
|||
// border: 1px solid black; |
|||
background-image: url('https://vediocnd.corpring.com/520love/520_title.png'); |
|||
background-size: 100% 100%; |
|||
// z-index: 10; |
|||
margin-bottom: -10px; |
|||
} |
|||
.top-img-box { |
|||
// margin-top: -10px; |
|||
width: 100%; |
|||
height: 750rpx; |
|||
background-image: url('https://vediocnd.corpring.com/520love/love_bg_1.gif'); |
|||
background-size: 110% 110%; |
|||
background-position: center; |
|||
padding: 200rpx 30rpx; |
|||
box-sizing: border-box; |
|||
.loading { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #fc1f8d; |
|||
} |
|||
.img-item-box { |
|||
// margin-top: 100rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
position: relative; |
|||
.heart-icon { |
|||
position: absolute; |
|||
width: 70px; |
|||
height: 60px; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background-image: url('https://vediocnd.corpring.com/520love/heart_icon_1.png'); |
|||
background-size: 100% 100%; |
|||
} |
|||
.img-item { |
|||
box-sizing: border-box; |
|||
border: 3px solid #faf0f3; |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
// background-color: #fff; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
} |
|||
.button-box { |
|||
padding: 0rpx 30rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
.save-button { |
|||
width: 250rpx; |
|||
height: 75rpx; |
|||
background-image: url('https://vediocnd.corpring.com/520love/save_button.png'); |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="desc-box"> |
|||
<text class="title">内容描述</text> |
|||
<textarea class="desc-input" v-model="contentDesc" |
|||
placeholder="请输入内容描述~" /> |
|||
<!-- <view class="bottom-box"> |
|||
<view class="keyTips" @click="clickRandomKey()"></view> |
|||
<view class="limit">{{drawDesc.length}}/50</view> |
|||
</view> --> |
|||
</view> |
|||
<view class="desc-box"> |
|||
<text class="title">场景描述</text> |
|||
<textarea class="desc-input" v-model="sceneDesc" |
|||
placeholder="描述一下你们的场景吧~" /> |
|||
<!-- <view class="bottom-box"> |
|||
<view class="keyTips" @click="clickRandomKey()"></view> |
|||
<view class="limit">{{drawDesc.length}}/50</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
<view class="type-box"> |
|||
<text class="title">风格选择</text> |
|||
<view class="type-item-box"> |
|||
<view class="type-item" v-for="(item, index) in paintStyle" @click="selectType(index)" |
|||
:style="{ backgroundImage: `url(${item.imgUrl})` }" |
|||
:class="curType == index? 'active' : ''"> |
|||
<view class="title"> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="draw-button" @click="getDraw()"> |
|||
生成图片 |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint} from '@/api/paint.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
sceneDesc: '', |
|||
contentDesc: '', |
|||
paintStyle:[], |
|||
curType: 0, |
|||
userInfo: {}, |
|||
checkData:{ |
|||
checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限 |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getPaintStyleList(); |
|||
// this.getPrompt(); |
|||
}, |
|||
onShow() { |
|||
this.checkLogin(); |
|||
this.checkUserCanAiPaint(); |
|||
}, |
|||
methods: { |
|||
selectType(index) { |
|||
this.curType = index |
|||
}, |
|||
//获取绘画风格 |
|||
async getPaintStyleList() { |
|||
const res = await getPaintStyle(); |
|||
if (res.data.code === 200) { |
|||
this.paintStyle = res.data.data |
|||
//console.log('this.paintStyle',this.paintStyle) |
|||
}else { |
|||
uni.showModal({ |
|||
content: '绘画风格加载失败！', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
//判断是否达到免费AI绘画次数上限 |
|||
async checkUserCanAiPaint(){ |
|||
let that = this; |
|||
const data = { |
|||
userId: that.userInfo.id, |
|||
platform: 1, |
|||
appType: 0 |
|||
} |
|||
const res = await checkUserCanAiPaint(data); |
|||
//console.log('res绘画',res) |
|||
if(res.data.code === 200){ |
|||
if(res.data.data === true){ |
|||
that.checkData.checkCanPaint = true; |
|||
}else{ |
|||
that.checkData.checkCanPaint = false; |
|||
} |
|||
}else{ |
|||
return uni.showModal({ |
|||
content: '检查绘画上限失败！', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
//判断是否登录 |
|||
checkLogin(){ |
|||
let that = this; |
|||
that.userInfo = uni.getStorageSync('userInfo'); |
|||
console.log('userInfo：',that.userInfo) |
|||
let token = uni.getStorageSync('token'); |
|||
if((Object.keys(that.userInfo).length==0) && (Object.keys(token).length==0)){ |
|||
console.error('尚未登录!'); |
|||
uni.showModal({ |
|||
title:'提示', |
|||
content:'您还没有登录!点击确定跳转登录界面以体验服务', |
|||
success(res) { |
|||
if (res.confirm) { |
|||
//跳转登录界面 |
|||
uni.switchTab({ |
|||
url: '/pages/userInfo/userInfo' |
|||
}); |
|||
}else if(res.cancel){ |
|||
uni.showToast({ |
|||
title:'登录获取更好的服务体验哟!', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
getDraw() { |
|||
// if(this.userInfo.isVip != 1) { |
|||
// uni.showModal({ |
|||
// title:'此功能仅限VIP使用', |
|||
// content: '开通VIP获得更多权益', |
|||
// }) |
|||
// return |
|||
// } |
|||
if(!this.contentDesc || !this.sceneDesc) { |
|||
uni.showToast({ |
|||
title: '请输入描述~', |
|||
duration: 2000, |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
const that = this; |
|||
|
|||
//跳转详情页生成图片 |
|||
uni.showModal({ |
|||
title: '温馨提示', |
|||
content: '任务创建完成,点击跳转生成内容！', |
|||
success(res) { |
|||
if(res.confirm){ |
|||
const data = { |
|||
prompt: that.contentDesc, |
|||
scenePrompt: that.sceneDesc, |
|||
styleName: that.paintStyle[that.curType].styleName, |
|||
painterId: that.userInfo.id, |
|||
painterName: that.userInfo.username, |
|||
appType: 0, |
|||
platform: 1, |
|||
} |
|||
uni.navigateTo({ |
|||
url: './loverPainResult?data='+JSON.stringify(data) |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 20px; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background-color: #faf0f3; |
|||
.draw-button { |
|||
position: fixed; |
|||
left: 50%; |
|||
bottom: 50rpx; |
|||
transform: translateX(-50%); |
|||
background: linear-gradient(#fc1f8d, #d2158a); |
|||
width: 400rpx; |
|||
height: 100rpx; |
|||
border-radius: 50rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #fff; |
|||
font-size: 20px; |
|||
|
|||
} |
|||
|
|||
.desc-box { |
|||
margin-bottom: 10px; |
|||
.title { |
|||
color: #fff; |
|||
font-size: 18px; |
|||
// margin-bottom: 20px; |
|||
color: #fc1f8d; |
|||
font-weight: bold; |
|||
} |
|||
.desc-input { |
|||
border: 2px solid #fc1f8d; |
|||
margin-top: 5px; |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
// color: #fff; |
|||
} |
|||
} |
|||
.type-box { |
|||
.title { |
|||
color: #fff; |
|||
font-size: 18px; |
|||
// margin-bottom: 5px; |
|||
color: #fc1f8d; |
|||
font-weight: bold; |
|||
} |
|||
.type-item-box { |
|||
margin-top: 5px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
.type-item { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
background-size: 100% 100%; |
|||
border-radius: 5px; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
.title { |
|||
position: absolute; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
background-color: rgba(255, 255, 255, 0.7); |
|||
color: #fc1f8d; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
} |
|||
.active { |
|||
border: 4px solid #fc1f8d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,414 @@ |
|||
<template> |
|||
<!-- --> |
|||
<view class="aiPaintDetail_M"> |
|||
<view class="paint"> |
|||
<!-- 绘制好的图替换默认图展示 --> |
|||
<view class="successCover" v-if="transImg"> |
|||
<image :src="transImg" mode="widthFix" class="img"/> |
|||
</view> |
|||
</view> |
|||
<view class="complete"> |
|||
<!-- prompt关键词 --> |
|||
<view class="keywords"> |
|||
<view> |
|||
<view class="promptTitle">关键词</view> |
|||
</view> |
|||
<view class="content"> |
|||
<text>{{prompt}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 图画详细参数 --> |
|||
<view class="label"> |
|||
<!-- <view class="style"> |
|||
<view class="i">关键词</view> |
|||
<view class="text">{{ prompt }}</view> |
|||
</view> --> |
|||
<view class="style"> |
|||
<view class="i">画布:</view> |
|||
<view class="text">{{ imgWidth }}x{{ imgHeight }}</view> |
|||
</view> |
|||
<view class="style"> |
|||
<view class="i">创作风格:</view> |
|||
<view class="text">{{styleName}}</view> |
|||
</view> |
|||
<view class="style"> |
|||
<view class="i">作品编号:</view> |
|||
<view class="text">{{paintId}}</view> |
|||
</view> |
|||
<view class="style"> |
|||
<view class="i">创作时间:</view> |
|||
<view class="text">{{paintTime}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<!-- 底部操作栏(绘制成功替换，告知图片保存在用户画册里) --> |
|||
<view class="action" > |
|||
<view class="action-group"> |
|||
<view class="actionBtn"> |
|||
<view class="grid" @click="onCopyPrompt"> |
|||
<view><uni-icons type="link" size="24"></uni-icons></view> |
|||
<text class="grid-text">复制关键词</text> |
|||
</view> |
|||
</view> |
|||
<view class="actionBtn"> |
|||
<view class="grid" @click="onSaveImage(transImg)"> |
|||
<view><uni-icons type="cloud-download" size="24"></uni-icons></view> |
|||
<text class="grid-text">保存作品</text> |
|||
</view> |
|||
</view> |
|||
<button open-type="share" size="mini" class="actionBtn" plain="true" type="default"> |
|||
<view class="grid" > |
|||
<view><uni-icons type="paperplane" size="24"></uni-icons></view> |
|||
<text class="grid-text">分享好友</text> |
|||
</view> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: "aiPaintDetail", |
|||
//import引入的组件需要注入到对象中才能使用 |
|||
components: {}, |
|||
//混合封装的属性和方法 |
|||
mixins: [], |
|||
//组件传入的属性 |
|||
props: {}, |
|||
data() { |
|||
//这里存放数据 |
|||
return { |
|||
transImg: undefined, |
|||
imgHeight: undefined, |
|||
imgWidth: undefined, |
|||
prompt: undefined, |
|||
successFlag: false, |
|||
paintId: undefined, |
|||
paintTime: undefined, |
|||
styleName: undefined, |
|||
batchSize: undefined, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
//接收上一个页面传来的绘画参数 |
|||
const paintData = JSON.parse(options.data); |
|||
this.imgHeight = paintData.height; |
|||
this.imgWidth = paintData.width; |
|||
this.prompt = paintData['prompt']; |
|||
this.styleName = paintData.styleName; |
|||
this.batchSize = paintData.batchSize; |
|||
this.paintTime = paintData.createTime; |
|||
this.transImg = paintData.imgUrl; |
|||
this.paintId = paintData.id; |
|||
}, |
|||
//计算属性 类似于data概念 |
|||
computed: {}, |
|||
//监控data中的数据变化 |
|||
watch: {}, |
|||
//方法集合 |
|||
methods: { |
|||
|
|||
//保存图片 |
|||
onSaveImage(url){ |
|||
let that = this; |
|||
that.download(url) |
|||
}, |
|||
|
|||
// 下载 |
|||
download(url) { |
|||
let that = this; |
|||
//console.log('即将下载的图片为',that.transImg) |
|||
uni.showLoading({ |
|||
title: '正在保存图片...', |
|||
success() { |
|||
//获取用户的当前设置。获取相册权限 |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
//如果没有相册权限 |
|||
if (!res.authSetting["scope.album"]) { |
|||
//向用户发起授权请求 |
|||
uni.authorize({ |
|||
scope: "scope.album", |
|||
success: () => { |
|||
uni.saveImageToPhotosAlbum({ |
|||
//图片路径，不支持网络图片路径 |
|||
filePath: url, |
|||
success: (res) => { |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
return uni.showToast({ |
|||
title: res.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
complete: (res) => { |
|||
uni.hideLoading(); |
|||
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|||
return uni.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
return uni.showToast({ |
|||
title: "保存成功！", |
|||
icon: 'none', |
|||
success() { |
|||
|
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
//授权失败 |
|||
fail: () => { |
|||
uni.hideLoading(); |
|||
uni.showModal({ |
|||
title: "您已拒绝获取相册权限", |
|||
content: "是否进入权限管理，调整授权？", |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
|||
uni.openSetting({ |
|||
success: (res) => { |
|||
|
|||
}, |
|||
}); |
|||
} else if (res.cancel) { |
|||
return uni.showToast({ |
|||
title: "已取消！", |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} else { |
|||
//如果已有相册权限，直接保存图片到系统相册 |
|||
uni.saveImageToPhotosAlbum({ |
|||
filePath: url, |
|||
success: (res) => { |
|||
console.log('有权限下载图片结果为',res) |
|||
console.log('333333') |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
return uni.showToast({ |
|||
title: res.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
//无论成功失败都走的回调 |
|||
complete: (res) => { |
|||
uni.hideLoading(); |
|||
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
|||
return uni.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
}else{ |
|||
return uni.showToast({ |
|||
title: "保存成功！", |
|||
duration: 2000, |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
fail: (res) => {}, |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//复制关键词 |
|||
onCopyPrompt(){ |
|||
let that = this; |
|||
//console.log('点击复制关键词事件') |
|||
uni.setClipboardData({ |
|||
data: that.prompt, |
|||
success() { |
|||
uni.showToast({ |
|||
title: '复制关键词成功!' |
|||
}); |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
}, |
|||
created() { |
|||
}, //生命周期 - 创建完成（可以访问当前this实例） |
|||
mounted() { |
|||
}, //生命周期 - 挂载完成（可以访问DOM元素） |
|||
beforeCreate() { |
|||
}, //生命周期 - 创建之前 |
|||
beforeMount() { |
|||
}, //生命周期 - 挂载之前 |
|||
beforeUpdate() { |
|||
}, //生命周期 - 更新之前 |
|||
updated() { |
|||
}, //生命周期 - 更新之后 |
|||
beforeDestroy() { |
|||
}, //生命周期 - 销毁之前 |
|||
destroyed() { |
|||
}, //生命周期 - 销毁完成 |
|||
activated() { |
|||
} //如果页面有keep-alive缓存功能，这个函数会触发 |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.aiPaintDetail_M { |
|||
|
|||
.complete { |
|||
padding-bottom: 200rpx; |
|||
|
|||
.Multi-sheet-tips { |
|||
width: 92%; |
|||
margin: 0 auto; |
|||
font-size: 24rpx; |
|||
line-height: 38rpx; |
|||
color: $uni-base-color; |
|||
border-bottom: 1rpx solid $uni-border-2; |
|||
} |
|||
|
|||
.label { |
|||
width: 92%; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: left; |
|||
align-items: flex-start; |
|||
margin-top: 15rpx; |
|||
|
|||
|
|||
.style { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: flex-start; |
|||
margin-top: 30rpx; |
|||
font-weight: bolder; |
|||
|
|||
.i { |
|||
font-size: 28rpx; |
|||
color: $uni-primary; |
|||
border-radius: 5rpx; |
|||
margin-right: 15rpx; |
|||
line-height: 38rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 26rpx; |
|||
line-height: 38rpx; |
|||
font-weight: bolder; |
|||
color: $uni-base-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.promptTitle{ |
|||
text-align: center; |
|||
font-weight: bolder; |
|||
font-size: 28rpx; |
|||
color: $uni-primary; |
|||
} |
|||
|
|||
.keywords { |
|||
width: 90%; |
|||
margin: 0 auto; |
|||
//background-color: #1A94BC1A; |
|||
//padding: 15rpx; |
|||
border-radius: 10rpx; |
|||
margin-top: 15rpx; |
|||
font-weight: bolder; |
|||
|
|||
.content { |
|||
margin-top: 20rpx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
/*这里设置几行*/ |
|||
overflow: hidden; |
|||
color: $uni-base-color; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.paint { |
|||
|
|||
.successCover { |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: 10 rpx; |
|||
|
|||
.img { |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: 10 rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.action { |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 0rpx; |
|||
left: 0rpx; |
|||
background-color: #fff; |
|||
padding: 20rpx 10rpx; |
|||
|
|||
.action-group { |
|||
width: 90%; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
|
|||
button { |
|||
background-color: transparent; |
|||
border: 0; |
|||
outline: 0; |
|||
font-size: 28rpx; |
|||
padding: 0; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button::after{ |
|||
border: none; |
|||
outline: 0; |
|||
} |
|||
|
|||
.actionBtn{ |
|||
width: 50%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
//margin:0rpx 25rpx 0rpx 25rpx; |
|||
|
|||
.grid { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.grid-text { |
|||
font-size: 28rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="header"> |
|||
<view class="vip-info"> |
|||
<image :src="userInfo.img" mode="" class="vip-info__avatar"></image> |
|||
<div> |
|||
<div class="vip-info__name">{{userInfo.username}}</div> |
|||
<div class="vip-info__tips">你还不是会员,开通立享 9 项特权</div> |
|||
</div> |
|||
</view> |
|||
<view class="vip-explan"> |
|||
会员说明 |
|||
<uni-icons type="help" size="20" color="#eee" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="vip-box"> |
|||
<view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)" |
|||
v-for="(item,index) in vipList" :key="index"> |
|||
<view class="title"> |
|||
{{item.vipName}} |
|||
</view> |
|||
<view class="price"> |
|||
<text class="price-unit">¥</text> {{item.price}} |
|||
</view> |
|||
<view class="o-price"> |
|||
{{item.originPrice}} |
|||
</view> |
|||
<view class="save-box"> |
|||
立省{{item.originPrice - item.price}}元 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<button class="sumbit-btn" @click="openVip" :disabled="disabled"> |
|||
立即开通 |
|||
</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
queryUserVipList, |
|||
addVipOrder, |
|||
unifiedOrder |
|||
} from '@/api/userInfo.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: null, |
|||
vipList: [], |
|||
active: 0, |
|||
disabled: false |
|||
} |
|||
}, |
|||
methods: { |
|||
async getVipList() { |
|||
const { |
|||
data |
|||
} = await queryUserVipList(); |
|||
this.vipList = data.data |
|||
}, |
|||
change(index) { |
|||
this.active = index |
|||
}, |
|||
async openVip() { |
|||
let data = this.vipList[this.active]; |
|||
let phone = this.userInfo |
|||
if (!Object.keys(data).length) return |
|||
this.disabled = true |
|||
uni.showLoading({ |
|||
title: "加载中..." |
|||
}); |
|||
const res_add = await addVipOrder({ |
|||
vipId: data.id |
|||
}) |
|||
let orderNo = res_add.data.data; |
|||
const res_uni = await unifiedOrder({ |
|||
orderNo, |
|||
sceneCode: 1, |
|||
payType: 'dypay', |
|||
}) |
|||
let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo |
|||
this.tikPay(orderId,orderToken) |
|||
|
|||
}, |
|||
tikPay(order_id, order_token) { |
|||
tt.pay({ |
|||
orderInfo: { |
|||
order_id, |
|||
order_token |
|||
}, |
|||
service: 5, |
|||
success(res) { |
|||
if (res.code == 0) { |
|||
|
|||
} |
|||
uni.hideLoading(); |
|||
this.disabled = false |
|||
}, |
|||
fail(res) { |
|||
uni.hideLoading(); |
|||
this.disabled = false |
|||
}, |
|||
}) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.userInfo = uni.getStorageSync('userInfo') |
|||
}, |
|||
created() { |
|||
if (!this.userInfo) { |
|||
uni.navigateBack() |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
this.getVipList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@mixin flex($center: center, $content: center) { |
|||
display: flex; |
|||
align-items: $center; |
|||
justify-content: $content; |
|||
} |
|||
|
|||
.container { |
|||
padding: 30rpx; |
|||
background: #fff; |
|||
|
|||
.vip-box { |
|||
margin: 30px 0; |
|||
@include flex(center, space-between); |
|||
|
|||
.vip-box__item { |
|||
width: 30%; |
|||
height: 300rpx; |
|||
padding: 20rpx; |
|||
@include flex; |
|||
flex-direction: column; |
|||
color: #000; |
|||
border: 1px solid #eee; |
|||
border-radius: 30rpx; |
|||
|
|||
&>view { |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.price { |
|||
font-weight: bold; |
|||
font-size: 48rpx; |
|||
color: #1991fd; |
|||
|
|||
.price-unit { |
|||
font-size: 24rpx |
|||
} |
|||
} |
|||
|
|||
.o-price { |
|||
color: #1991fd; |
|||
font-size: 26rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
.save-box { |
|||
border-radius: 30rpx; |
|||
width: 150rpx; |
|||
height: 50rpx; |
|||
background-color: #e8f4ff; |
|||
font-size: 24rpx; |
|||
color: #68c2ff; |
|||
@include flex; |
|||
} |
|||
} |
|||
|
|||
.item-active { |
|||
border: none; |
|||
background: linear-gradient(to bottom right, #68c2ff, #0684fe); |
|||
|
|||
|
|||
|
|||
.price, |
|||
.title { |
|||
color: #fff; |
|||
} |
|||
|
|||
.o-price { |
|||
color: #eee; |
|||
} |
|||
|
|||
.save-box { |
|||
color: #fff; |
|||
background-color: rgba(255, 255, 255, .1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sumbit-btn { |
|||
margin-top: 60rpx; |
|||
height: 88rpx; |
|||
@include flex; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
background: linear-gradient(to bottom right, #68c2ff, #0684fe); |
|||
} |
|||
|
|||
.header { |
|||
height: 200rpx; |
|||
background-color: gray; |
|||
padding: 20rpx; |
|||
@include flex(center, space-between); |
|||
border-radius: 20rpx; |
|||
|
|||
.vip-explan { |
|||
color: #eee; |
|||
font-size: 24rpx; |
|||
@include flex(center, flex-start); |
|||
|
|||
} |
|||
|
|||
.vip-info { |
|||
@include flex(center, flex-start); |
|||
|
|||
.vip-info__avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.vip-info__name { |
|||
color: #fff; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.vip-info__tips { |
|||
color: #eee; |
|||
font-size: 24rpx |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue