gxwebsoft/aishangjia-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:14:48 +08:00
commit 1b923e5cff
1030 changed files with 128016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
sub_pages/user/base/address/address.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你所在地区是？
</view>
<view class="desc">
<!-- 给你推荐年龄相近的异性 -->
</view>
<view class="birthday">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
:value="currentValue" @change="bindChange" class="picker-view">
<picker-view-column id="provinces">
<view :class="{current: index == currentValue[0]}" class="item" v-for="(item,index) in provinces" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view :class="{current: index == currentValue[1]}" class="item" v-for="(item,index) in citys" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view :class="{current: index == currentValue[2]}" class="item" v-for="(item,index) in areas" :key="index">{{item.label}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="btn-wrapper">
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
let cityData = []
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
data: function() {
return {
title: 'picker-view',
provinces: [],
province: '',
citys: [],
city: '',
areas: [],
area: '',
currentValue: [0, 0, 0],
indicatorStyle: `height: 50px;color: #FFF;`
}
},
async onLoad() {
const app = this
qqmapsdk = new QQMapWX({
key: 'RDABZ-IF7AB-L4AUO-JHMX3-GBSGE-KIF53'
});
await this.loadData()
// 获取定位信息
uni.getLocation({
success: (e)=>{
qqmapsdk.reverseGeocoder({
location: {
latitude: e.latitude,
longitude: e.longitude
},
success: (res)=>{
const {province, city, district} = res.result.address_component
console.log(province);
const provinceIndex = app.provinces.findIndex(item=> item.label == province)
app.citys = app.filterData(cityData[provinceIndex].children)
const cityIndex = app.citys.findIndex(item=> item.label == city)
app.areas = app.filterData(cityData[provinceIndex].children[cityIndex].children)
const areaIndex = app.areas.findIndex(item=> item.label == district)
app.$nextTick(()=>{
app.currentValue = [provinceIndex,cityIndex, areaIndex]
app.province = app.provinces[app.currentValue[0]]
app.city = app.citys[app.currentValue[1]]
app.area = app.areas[app.currentValue[2]]
})
},
fail: (error)=> {
console.log('error: ',error);
}
})
console.log(e);
},
fail() {
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
app.isAuthor = false
}
})
},
methods: {
formatCityData() {
const currentValue = this.currentValue
const provinceList = this.filterData(cityData)
const cityList = this.filterData(cityData[currentValue[0]].children)
const areaList = this.filterData(cityData[currentValue[0]].children[currentValue[1]].children)
const provice = provinceList[currentValue[0]]
const city = cityList[currentValue[1]]
const area = areaList[currentValue[2]]
this.provinces = provinceList
this.citys = cityList
this.areas = areaList
this.province = provice
this.city = city
this.area = area
},
bindChange: function(e) {
const val = e.detail.value;
let {
currentValue
} = this
console.log('val:', val)
console.log('currentValue:', currentValue)
if (val[0] !== currentValue[0]) {
currentValue = [val[0], 0, 0]
this.currentValue = currentValue
} else if (val[1] !== currentValue[1]) {
currentValue = [val[0], val[1], 0]
this.currentValue = currentValue
} else if (val[2] !== currentValue[2]) {
currentValue = val
this.currentValue = currentValue
}
this.formatCityData()
this.province = this.provinces[val[0]]
this.city = this.citys[val[1]]
this.area = this.areas[val[2]]
},
filterData(arr = []) {
return arr.map(item=>{
return {
label: item.label,
value: item.value
}
})
},
handleSubmit() {
const userBase = uni.getStorageSync('UserBase') || {}
userBase.province = this.province
userBase.city = this.city
userBase.region = this.area
userBase.address = `${this.province} ${this.city} ${this.area}`
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/yearpay/yearpay')
},
loadData() {
return new Promise((reso,rej) => {
uni.request({
url: 'https://file.wsdns.cn/json/city.js',
success: (res) => {
cityData = res.data
this.formatCityData()
return reso()
},
fail() {
return rej()
}
})
})
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.birthday {
margin-top: 100rpx;
}
</style>

218
sub_pages/user/base/avatar/avatar.vue Normal file
View File

@@ -0,0 +1,218 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop
placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
上传头像/封面
</view>
<view class="desc">
一张亮眼的头像更容易获得青睐
</view>
<view class="avatar">
<button class="btn-avatar u-reset-button" @click="onChooseAvatar">
<image class="btn-avatar-plus" v-if="!avatar" src="@/static/icon/path.png" mode="widthFix"></image>
<image class="avatar-img" v-else :src="avatar" mode="widthFix"></image>
</button>
</view>
<ksp-cropper mode="ratio" :url="avatarTemp"
@cancel="avatarTemp = ''" @ok="cropperOk"></ksp-cropper>
<view class="tips">
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/5.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">999+喜欢</view>
<image class="tips-ft" src="@/static/user-base/y.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/4.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">暴露照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/3.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">模糊照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/2.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">非人物照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/1.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">网络图片</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
</view>
<view class="btn-wrapper-pla">
</view>
<view class="btn-wrapper">
<u-button v-if="avatar == null || avatar == ''" text="继续" color="#837C8B" shape="circle" @click="handleSubmit"></u-button>
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
import * as UserProfileApi from '@/api/love-user-profile.js'
import * as UploadApi from '@/api/upload'
import {
dateFormat
} from '@/utils/util.js'
export default {
data() {
return {
avatarTemp: '',
fileList1: [],
avatar: '',
};
},
onLoad() {
},
methods: {
async cropperOk(e) {
const res = await this.uploadFilePromise(e.path)
this.avatarTemp = ''
this.avatar = res.url
},
async onChooseAvatar({
detail
}) {
uni.chooseImage({
count: 1,
success: (res) => {
this.avatarTemp = res.tempFilePaths[0]
}
})
},
handleSubmit() {
if (!this.avatar) {
uni.showToast({
title: '请上传头像',
icon: 'none'
})
return
}
const userBase = uni.getStorageSync('UserBase') || {}
userBase.avatar = this.avatar
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/photo/photo')
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
UploadApi.uploadFile({
filePath: url,
fileType: 'image',
name: 'file',
header: {
Authorization: uni.getStorageSync('AccessToken')
},
}).then(result => {
setTimeout(() => {
resolve(result.data)
}, 1000)
}).catch(err => {
console.log("err: ", err);
})
})
},
}
}
</script>
<style lang="scss">
@import "../base.scss";
.avatar{
margin: 100rpx 0 100rpx 0;
}
.nickname {
width: 620rpx;
margin: 160rpx auto 120rpx;
display: flex;
justify-content: center;
&-input {
background-color: #FFFFFF;
color: #FFFFFF;
}
/deep/.u-upload__button {
background-color: rgba(#6A6A6A, .6) !important;
border-radius: 10rpx !important;
border: 4rpx rgba(#BBBBBB, .5) solid;
}
}
.tips {
display: flex;
width: 640rpx;
margin: 10rpx auto;
justify-content: space-between;
&-item {
width: 104rpx;
font-size: 24rpx;
text-align: center;
position: relative;
&-image {
width: 104rpx;
height: 104rpx;
}
&-text {
white-space: nowrap;
}
}
.tips-ft{
width: 20rpx;
position: absolute;
right: 6rpx;
top: 82rpx;
border-radius: 50%;
}
}
.btn-avatar{
display: flex;
justify-content: center;
align-items: center;
width: 320rpx;
height: 320rpx;
background: rgba(15, 0, 32, 0.5);
border: 2rpx solid rgb(151, 99, 157);
border-radius: 10rpx;
overflow: hidden;
.btn-avatar-plus{
width: 72rpx;
height: 72rpx;
}
.avatar-img{
width: 320rpx;
height: 320rpx;
border-radius: 10rpx;
}
}
</style>

120
sub_pages/user/base/base.scss Normal file
View File

@@ -0,0 +1,120 @@
.page-wrap {
background-image: url('https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/AgAACjstO6aGYdpKbYVInIACkhYjoWai.png');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
min-height: 100vh;
}
.page-bg{
width: 100%;
height: 100%;
// background-color: $user-base-bg-color;
}
page {
// /* background-color: #1F021E; */
color: #FFF;
}
.notice {
font-size: 28rpx;
// background-color: #999999;
background-color: #330436;
color: #c6c6c6;
border-radius: 30rpx;
width: 600rpx;
margin: 20rpx auto;
text-align: center;
padding: 10rpx;
}
.title {
text-align: center;
font-size: 48rpx;
font-weight: bold;
margin: 40rpx 0;
}
.desc {
text-align: center;
font-size: 32rpx;
}
.sex{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.sex-item{
position: relative;
.gou{
position: absolute;
border-radius: 100%;
width: 50rpx;
height: 50rpx;
right: 0;
bottom: 38rpx;
}
}
}
.btn-wrapper-pla{
height: 350rpx;
}
.btn-wrapper {
position: fixed;
bottom: 120rpx;
left: 0;
right: 0;
width: 400rpx;
margin: auto;
// display: flex;
// align-items: center;
padding: 0 20rpx;
}
.indicator-class {
line-height: 60rpx !important;
height: 60rpx !important;
&::after{
display: none;
}
&::before{
display: none;
}
// color: #fff;
background-color: rgba(#000000, .2);
border-radius: 50rpx;
// border: none !important;
}
.mask-class {
// background: #1F021E;
background: transparent;
color: #FFF;
border: none !important;
}
.picker-view {
width: 690rpx;
height: 300rpx;
margin: 220rpx auto;
// background: $user-base-bg-color;
color: #FFF;
}
.item {
line-height: 60rpx !important;
height: 60rpx !important;
text-align: center;
/* background: #1F021E; */
color: #999;
&.current{
color: #FFFFFF
}
}

94
sub_pages/user/base/birthday/birthday.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你的生日是？
</view>
<view class="desc">
给你推荐年龄相近的异性
</view>
<view class="birthday">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class" :value="value" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" :class="{current: item == year}" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" :class="{current: index == month - 1}" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" :class="{current: index == day - 1}" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
<view class="btn-wrapper">
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled" shape="circle"
@click="handleSubmit"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
export default {
data: function() {
const date = new Date()
const years = []
const months = []
const month = date.getMonth() + 1
const days = []
const day = date.getDate()
for (let i = 1950; i <= date.getFullYear() - 18; i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
const year = years[40]
return {
title: 'picker-view',
years,
year,
months,
month,
days,
day,
value: [40, month - 1, day - 1],
indicatorStyle: `height: 50px;color: #FFF;`
}
},
methods: {
bindChange: function(e) {
const val = e.detail.value
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
},
handleSubmit(){
const userBase = uni.getStorageSync('UserBase') || {}
userBase.birthday = [this.year,this.month,this.day].join("-")
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/height/height')
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.birthday{
margin-top: 100rpx;
}
</style>

80
sub_pages/user/base/height/height.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你的身高是？
</view>
<view class="desc">
</view>
<view class="height">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
:value="value" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" :class="{current: index == value[0]}" v-for="(item,index) in heightList" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="btn-wrapper">
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled"
shape="circle" @click="handleSubmit()"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
import * as DictApi from '@/api/dict.js'
export default {
data: function() {
// const heightList = []
// for (let i = 140; i <= 200; i++) {
// heightList.push(i)
// }
return {
title: 'picker-view',
heightList: [],
height: 165,
value: [0],
indicatorStyle: `height: 50px;color: #FFF;`,
}
},
onLoad() {
this.loadData()
},
methods: {
bindChange: function(e) {
this.value = e.detail.value
},
handleSubmit(){
const userBase = uni.getStorageSync('UserBase') || {}
userBase.height = this.heightList[this.value[0]]
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/address/address')
},
loadData() {
DictApi.listDictionary().then(res => {
this.heightList = res.data.height[0];
this.$nextTick(()=>{
this.value = [25]
})
})
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.height{
margin-top: 200rpx;
}
</style>

129
sub_pages/user/base/nickname/nickname.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你的昵称是？
</view>
<view class="desc">
</view>
<view class="nickname">
<u-input color="#FFFFFF" shape="circle" slot="value" class="nickname-input" v-model="nickname" type="nickname" maxlength="8" placeholder="请输入昵称" />
</view>
<view class="btn-wrapper">
<u-button v-if="nickname == null || nickname == ''" text="继续" color="#837C8B" shape="circle" ></u-button>
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
import * as UserProfileApi from '@/api/love-user-profile.js'
import {
dateFormat
} from '@/utils/util.js'
export default {
data() {
return {
nickname: null,
disabled: false,
form: {
userInfo: null
},
interest: null,
fileList1: null
};
},
onLoad() {
this.loadData();
},
methods: {
loadData() {
const app = this
const userId = uni.getStorageSync('userId')
UserProfileApi.getUserProfile(userId).then(res => {
app.form = res.data
const userInfo = res.data.userInfo
app.form.avatar = userInfo.avatar
app.form.nickname = userInfo.nickname
app.form.comments = userInfo.comments
app.form.sexName = userInfo.sexName
app.form.birthday = userInfo.birthday
app.interest = JSON.parse(app.form.interest)
app.fileList1 = JSON.parse(app.form.images)
app.isLogin = false
}).catch(err => {
app.$success(err)
})
},
handleSubmit() {
const userBase = uni.getStorageSync('UserBase') || {}
userBase.nickname = this.nickname
uni.setStorageSync("UserBase", userBase)
this.updateUserInfo()
// this.$push('/sub_pages/user/base/sex/sex')
},
updateUserInfo() {
const app = this
const userBase = uni.getStorageSync('UserBase') || {}
app.form.interest = JSON.stringify(app.interest)
this.form.province = userBase.province.label
this.form.city = userBase.city.label
this.form.region = userBase.region.label
this.form.area = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
this.form.sex = userBase.sex
this.form.yearlyPay = userBase.yearlyPay
this.form.nickname = userBase.nickname
this.form.height = userBase.height
this.form.birthday = userBase.birthday
this.form.images = JSON.stringify(userBase.images)
this.form.avatar = userBase.avatar
// 同步user表
this.form.userInfo.province = userBase.province.label
this.form.userInfo.city = userBase.city.label
this.form.userInfo.region = userBase.region.label
this.form.userInfo.address = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
this.form.userInfo.nickname = userBase.nickname
this.form.userInfo.height = userBase.height
this.form.userInfo.yearlyPay = userBase.yearlyPay
this.form.userInfo.sex = userBase.sex
this.form.userInfo.birthday = userBase.birthday
this.form.userInfo.avatar = userBase.avatar
// 计算年龄
const birthdayYear = dateFormat('YYYY', new Date(userBase.birthday))
const age = new Date().getFullYear() - birthdayYear
this.form.age = age
this.form.userInfo.age = age
UserProfileApi.updateUserProfile(app.form).then(result => {
uni.reLaunch({
url: "/pages/index/index"
})
}).catch(err => {
uni.$u.toast(err)
})
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.nickname{
width: 690rpx;
margin: 140rpx auto 0;
&-input {
background-color: #FFFFFF;
color: #FFFFFF;
}
}
</style>

323
sub_pages/user/base/photo/photo.vue Normal file
View File

@@ -0,0 +1,323 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop
placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
上传形象照
</view>
<view class="desc">
可上传工作照、生活照，能获得更多青睐喔~
</view>
<view class="nickname">
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(0)">
<image class="btn-avatar-plus" v-if="!fileList1[0].url" src="@/static/icon/path.png" mode="widthFix"></image>
<image class="avatar-img" v-else :src="fileList1[0].url" mode="widthFix"></image>
</button>
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(1)">
<image class="btn-avatar-plus" v-if="!fileList1[1].url" src="@/static/icon/path.png" mode="widthFix"></image>
<image class="avatar-img" v-else :src="fileList1[1].url" mode="widthFix"></image>
</button>
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(2)">
<image class="btn-avatar-plus" v-if="!fileList1[2].url" src="@/static/icon/path.png" mode="widthFix"></image>
<image class="avatar-img" v-else :src="fileList1[2].url" mode="widthFix"></image>
</button>
</view>
<view class="tips">
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/5.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">999+喜欢</view>
<image class="tips-ft" src="@/static/user-base/y.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/4.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">暴露照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/3.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">模糊照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/2.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">非人物照</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
<view class="tips-item">
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/1.png" mode="aspectFill" class="tips-item-image"></image>
<view class="tips-item-text">网络图片</view>
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
</view>
</view>
<view class="btn-wrapper-pla">
</view>
<view class="btn-wrapper">
<u-button v-if="fileList1 == null || fileList1.length == 0" text="继续" color="#837C8B" shape="circle" @click="handleSubmit"></u-button>
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
<view @click="handleSubmit" class="btn-skip">
跳过
</view>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
import * as UserProfileApi from '@/api/love-user-profile.js'
import * as UploadApi from '@/api/upload'
import {
dateFormat
} from '@/utils/util.js'
export default {
data() {
return {
avatarTemp: '',
fileList1: [{url: ''},{url: ''},{url: ''}],
avatar: '',
};
},
onLoad() {
},
methods: {
async cropperOk(e) {
const res = await this.uploadFilePromise(e.path)
this.avatarTemp = ''
this.avatar = res.url
},
async onChooseAvatar({
detail
}) {
uni.chooseImage({
count: 1,
success: (res) => {
this.avatarTemp = res.tempFilePaths[0]
}
})
},
onChooseAvatar(index) {
const app = this
uni.chooseImage({
count: 1,
success: (res) => {
app.uploadFilePromise(res.tempFilePaths[0]).then(result => {
console.log('index: ',index);
console.log('app.fileList1: ',app.fileList1);
app.fileList1[index].url = result.url
})
}
})
},
handleSubmit() {
const userBase = uni.getStorageSync('UserBase') || {}
userBase.images = this.fileList1.filter(item => item.url)
if(userBase.images.length == 0){
userBase.images = [{url: userBase.avatar}]
}
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/nickname/nickname')
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
console.log("event: ", event);
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result.url,
thumb: result.thumbUrl
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
UploadApi.uploadFile({
filePath: url,
fileType: 'image',
name: 'file',
header: {
Authorization: uni.getStorageSync('AccessToken')
},
}).then(result => {
setTimeout(() => {
resolve(result.data)
}, 1000)
}).catch(err => {
console.log("err: ", err);
})
// UploadApi.uploadFile()
// let a = uni.uploadFile({
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
// filePath: url,
// name: 'file',
// header: {
// Authorization: uni.getStorageSync('AccessToken')
// },
// formData: {
// user: 'test'
// },
// success: (res) => {
// const result = JSON.parse(res.data)
// setTimeout(() => {
// resolve(result)
// }, 1000)
// }
// });
})
},
}
}
</script>
<style lang="scss">
@import "../base.scss";
.avatar{
margin: 100rpx 0 100rpx 0;
}
.btn-avatar{
display: flex;
justify-content: center;
}
.nickname {
width: 690rpx;
margin: 160rpx auto 120rpx;
display: flex;
justify-content: center;
&-input {
background-color: #FFFFFF;
color: #FFFFFF;
}
/deep/.u-upload__wrap {
justify-content: space-between;
flex-wrap: wrap;
&::after {
content: '';
width: 200rpx;
display: block;
}
}
/deep/.u-upload__button {
background-color: rgba(#6A6A6A, .6) !important;
border-radius: 10rpx !important;
border: 4rpx rgba(#BBBBBB, .5) solid;
}
}
.tips {
display: flex;
width: 640rpx;
margin: 10rpx auto;
justify-content: space-between;
&-item {
width: 104rpx;
font-size: 24rpx;
text-align: center;
position: relative;
&-image {
width: 104rpx;
height: 104rpx;
}
&-text {
white-space: nowrap;
}
}
.tips-ft{
width: 20rpx;
position: absolute;
right: 6rpx;
top: 82rpx;
border-radius: 50%;
}
}
.btn-avatar{
display: flex;
justify-content: center;
align-items: center;
width: 320rpx;
height: 320rpx;
background: rgba(15, 0, 32, 0.5);
border: 2rpx solid rgb(151, 99, 157);
border-radius: 10rpx;
overflow: hidden;
.btn-avatar-plus{
width: 72rpx;
height: 72rpx;
}
.avatar-img{
width: 320rpx;
height: 320rpx;
border-radius: 10rpx;
}
}
.btn-skip{
font-size: 32rpx;
text-align: center;
margin-top: 64rpx;
color: #FFFFFF;
}
.btn-avatar{
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 200rpx;
background: rgba(15, 0, 32, 0.5);
border: 2rpx solid rgb(151, 99, 157);
border-radius: 10rpx;
overflow: hidden;
.btn-avatar-plus{
width: 72rpx;
height: 72rpx;
}
.avatar-img{
width: 320rpx;
height: 320rpx;
border-radius: 10rpx;
}
}
</style>

100
sub_pages/user/base/sex/sex.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你的性别是？
</view>
<view class="desc">
注册后将无法更改，请认真填写
</view>
<view class="sex">
<view :class="{current: sex == 1}" @click="sex = 1" class="sex-item">
<image class="sex-item-icon" :src="sex == 1 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-01.png'" mode="aspectFill"></image>
<view class="sex-item-text">
男
</view>
<image src="../../../../static/icon/gou.png" v-if="sex == 1" class="gou"></image>
</view>
<view :class="{current: sex == 2}" @click="sex = 2" class="sex-item" style="margin-top: 50rpx;">
<image class="sex-item-icon" :src="sex == 2 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-01.png'" mode="aspectFill"></image>
<view class="sex-item-text">
女
</view>
<image src="../../../../static/icon/gou.png" v-if="sex == 2" class="gou"></image>
</view>
</view>
<view class="btn-wrapper">
<u-button v-if="sex == null" text="继续" color="#837C8B" shape="circle" ></u-button>
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sex: null
};
},
methods: {
handleSubmit() {
console.log('this.sex: ', this.sex);
if (this.sex != null) {
const userBase = uni.getStorageSync('UserBase') || {}
userBase.sex = this.sex
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/birthday/birthday')
}else {
if (!this.avatar) {
uni.showToast({
title: '请选择性别',
icon: 'none'
})
return
}
}
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.sex {
display: flex;
justify-content: space-around;
margin-top: 200rpx;
&-item {
display: flex;
flex-direction: column;
text-align: center;
opacity: .4;
&.current {
opacity: 1;
}
&-icon {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
// background-color: #FFF;
}
&-text {
font-size: 28rpx;
margin-top: 10rpx;
}
}
}
</style>

80
sub_pages/user/base/yearpay/yearpay.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<view class="page-wrap">
<view class="page-bg">
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
<view class="notice">
请如实填写个人资料，真实的资料会更受欢迎
</view>
<view class="title">
你的年收入是？
</view>
<view class="desc">
</view>
<view class="height">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
:value="value" @change="bindChange" class="picker-view">
<picker-view-column>
<view :class="{current: index == value[0]}" class="item" v-for="(item,index) in heightList" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="btn-wrapper">
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled"
shape="circle" @click="handleSubmit()"></u-button>
</view>
<u-safe-bottom></u-safe-bottom>
</view>
</view>
</template>
<script>
import * as DictApi from '@/api/dict.js'
export default {
data: function() {
// const heightList = []
// for (let i = 140; i <= 200; i++) {
// heightList.push(i)
// }
return {
title: 'picker-view',
heightList: [],
height: 165,
value: [0],
indicatorStyle: `height: 50px;color: #FFF;`,
}
},
onLoad() {
this.loadData()
},
methods: {
bindChange: function(e) {
this.value = e.detail.value
},
handleSubmit(){
const userBase = uni.getStorageSync('UserBase') || {}
userBase.yearlyPay = this.heightList[this.value[0]]
console.log(userBase);
uni.setStorageSync("UserBase", userBase)
this.$push('/sub_pages/user/base/avatar/avatar')
},
loadData() {
DictApi.listDictionary().then(res => {
this.heightList = res.data.yearlyPay[0];
this.$nextTick(()=>{
this.value = [1]
})
})
}
}
}
</script>
<style lang="scss">
@import "../base.scss";
.height{
margin-top: 200rpx;
}
</style>

311
sub_pages/user/bind/index.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<view class="container" :style="appThemeStyle">
<!-- 页面头部 -->
<view class="header">
<view class="title">
<text>绑定您的手机号</text>
</view>
<view class="sub-title">
<text>为了更好的服务您，请绑定手机号</text>
</view>
</view>
<!-- 表单 -->
<view class="submit-form">
<!-- 手机号 -->
<view class="form-item">
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
</view>
<!-- 图形验证码 -->
<view class="form-item">
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
<view class="form-item--parts">
<view class="captcha" @click="getCaptcha()">
<image class="image" :src="captcha.base64"></image>
</view>
</view>
</view>
<!-- 短信验证码 -->
<view class="form-item">
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
<view class="form-item--parts">
<view class="captcha-sms" @click="handelSmsCaptcha()">
<text v-if="!smsState" class="activate">获取验证码</text>
<text v-else class="un-activate">重新发送({{ times }})秒</text>
</view>
</view>
</view>
<!-- 确认绑定 -->
<view class="submit-button" @click="handleSubmit()">
<text>确认绑定</text>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import * as UserApi from '@/api/user'
// import * as CaptchaApi from '@/api/captcha'
import * as Verify from '@/utils/verify'
// 倒计时时长(秒)
const times = 60
// 表单验证场景
const GET_CAPTCHA = 10
const FORM_SUBMIT = 20
export default {
data() {
return {
// 正在加载
isLoading: false,
// 图形验证码信息
captcha: {},
// 短信验证码发送状态
smsState: false,
// 倒计时
times,
// 手机号
mobile: '',
// 图形验证码
captchaCode: '',
// 短信验证码
smsCode: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
created() {
// 获取图形验证码
this.getCaptcha()
},
methods: {
// 获取图形验证码
// getCaptcha() {
// const app = this
// CaptchaApi.image().then(result => app.captcha = result.data)
// },
// 点击发送短信验证码
handelSmsCaptcha() {
const app = this
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
app.sendSmsCaptcha()
app.getCaptcha()
}
},
// 表单验证
formValidation(scene = GET_CAPTCHA) {
const app = this
// 验证获取短信验证码
if (scene === GET_CAPTCHA) {
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
return false
}
}
// 验证表单提交
if (scene === FORM_SUBMIT) {
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
return false
}
}
return true
},
// 验证手机号
validteMobile(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入手机号')
return false
}
if (!Verify.isMobile(str)) {
this.$toast('请输入正确格式的手机号')
return false
}
return true
},
// 验证图形验证码
validteCaptchaCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入图形验证码')
return false
}
return true
},
// 验证短信验证码
validteSmsCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入短信验证码')
return false
}
return true
},
// 请求发送短信验证码接口
sendSmsCaptcha() {
const app = this
app.isLoading = true
CaptchaApi.sendSmsCaptcha({
form: {
captchaKey: app.captcha.key,
captchaCode: app.captchaCode,
mobile: app.mobile
}
})
.then(result => {
// 显示发送成功
app.$toast(result.message)
// 执行定时器
app.timer()
})
.finally(() => app.isLoading = false)
},
// 执行定时器
timer() {
const app = this
app.smsState = true
const inter = setInterval(() => {
app.times = app.times - 1
if (app.times <= 0) {
app.smsState = false
app.times = times
clearInterval(inter)
}
}, 1000)
},
// 点击提交
handleSubmit() {
const app = this
if (!app.isLoading && app.formValidation(FORM_SUBMIT)) {
app.onSubmitEvent()
}
},
// 确认提交事件
onSubmitEvent() {
const app = this
app.isLoading = true
UserApi.bindMobile({ form: { smsCode: app.smsCode, mobile: app.mobile } })
.then(result => {
// 显示操作成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
app.onNavigateBack(1)
}, 2000)
})
.finally(() => app.isLoading = false)
},
/**
* 提交成功-跳转回原页面
*/
onNavigateBack(delta) {
uni.navigateBack({
delta: Number(delta || 1)
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 100rpx 60rpx;
min-height: 100vh;
background-color: #fff;
}
// 页面头部
.header {
margin-bottom: 50rpx;
.title {
color: #191919;
font-size: 50rpx;
}
.sub-title {
margin-top: 20rpx;
color: #b3b3b3;
font-size: 25rpx;
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 25rpx;
height: 96rpx;
&--input {
font-size: 26rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
// 图形验证码
.captcha {
height: 100%;
.image {
display: block;
width: 192rpx;
height: 100%;
}
}
// 短信验证码
.captcha-sms {
font-size: 22rpx;
line-height: 50rpx;
padding-right: 20rpx;
.activate {
color: #cea26a;
}
.un-activate {
color: #9e9e9e;
}
}
}
// 提交按钮
.submit-button {
width: 100%;
height: 86rpx;
margin-top: 70rpx;
background: linear-gradient(to right, $main-bg, $main-bg2);
color: $main-text;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>

67
sub_pages/user/buy/buy.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<view class="">
<view style="background-color: blue;width: 680rpx;height: 200rpx; margin:20rpx auto; border-radius: 30rpx;">huiyuan</view>
<u-tabs :list="list1" @click="click"></u-tabs>
<view v-if="index == 0">
<u-popup :show="show" mode="center" @close="close" @open="open">
<view>
<view style="width: 500rpx;height: 400rpx; padding: 30rpx;">请购买</view>
</view>
</u-popup>
<u-button @click="show = true">000000</u-button>
</view>
<view v-if="index == 1">
11111
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
index: 0,
list1: [{
name: '关注',
}, {
name: '推荐',
}, {
name: '电影'
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
},
methods: {
open() {
// console.log('open');
},
close() {
this.show = false
// console.log('close');
},
click(item) {
this.index = item.index
console.log('item', item.name);
}
}
}
</script>
<style>
</style>

623
sub_pages/user/grade/grade.vue Normal file
View File

@@ -0,0 +1,623 @@
<template>
<view class="grade-index">
<view class="user-card">
<view class="user-info">
<view class="avatar">
<u-avatar size="50" class="avatar-img"
:src="userInfo.avatar"></u-avatar>
<view class="user">
<view class="nickname">{{ userInfo.nickname }}</view>
<view class="desc">您当前是{{ userInfo.gradeName }}</view>
</view>
</view>
<view class="buy-log">已解锁的功能</view>
</view>
</view>
<u-gap height="10"></u-gap>
<view class="member-service">
<view class="tabs">
<u-tabs :list="tabs" lineColor="#7f006f" :activeStyle="{ color: '#7f006f' }" @click="onTabs"></u-tabs>
</view>
<view v-if="index == 0" class="service-card">
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 271">
<view class="tool-btn" @click="openEdit(item)">
<view class="icon">
<image :src="item.icon" mode="widthFix"></image>
</view>
<text class="btn-name">{{ item.name }}</text>
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7 ">已解锁</text>
<text class="btn-desc" v-else>{{ item.subName }}</text>
</view>
</view>
</view>
<view v-if="index == 1" class="service-card">
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 272">
<view class="tool-btn" @click="openEdit(item)">
<view class="icon">
<image :src="item.icon" mode="widthFix"></image>
</view>
<text class="btn-name">{{ item.name }}</text>
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7">已解锁</text>
<text class="btn-desc" v-else>{{ item.subName }}</text>
</view>
</view>
<!-- <view class="item">
<view class="tool-btn" @click="showTool = true">
<view class="icon">
<image src="../../../static/icon/grade-02.png" mode="widthFix"></image>
</view>
<text class="btn-name">搜索优先</text>
</view>
</view>
<view class="item">
<view class="tool-btn" @click="showTool = true">
<view class="icon">
<image src="../../../static/icon/grade-03.png" mode="widthFix"></image>
</view>
<text class="btn-name">会员标志</text>
</view>
</view>
<view class="item">
<view class="tool-btn" @click="showTool = true">
<view class="icon">
<image src="../../../static/icon/grade-04.png" mode="widthFix"></image>
</view>
<text class="btn-name">查看粉丝</text>
</view>
</view>
<view class="item">
<view class="tool-btn" @click="showTool = true">
<view class="icon">
<image src="../../../static/icon/grade-05.png" mode="widthFix"></image>
</view>
<text class="btn-name">查看证件</text>
</view>
</view> -->
</view>
</view>
<u-popup :show="showEdit" mode="center" :round="10" :closeable="true" @close="closeEidt">
<view class="show-tool">
<view class="head">
<view class="info">
<text class="title">{{ current.name }}</text>
<block v-if="current.equity">
<text class="sub-title" v-if="current.equity.length > 0">有效期至：{{ current.equity[0].expirationTime }}</text>
</block>
</view>
<view class="desc">{{ current.comments }}</view>
<view class="buy" v-if="current.price">
<view class="item" v-for="(d,i) in current.price" :key="i"
:class="priceId == d.id ? 'active' : ''" @click="onPlan(d)">
￥{{ d.price }}
<view class="nums">{{ d.name }}</view>
</view>
</view>
</view>
<view class="footer">
<view class="btn-wrapper">
<u-button :text="onBuyText" color="linear-gradient(to bottom, #010002, #681752)"
:disabled="priceId == 0 || disabled" shape="circle" @click="onBuy"></u-button>
</view>
<view class="xieyi">
开通会员前请务必仔细阅读<text @click="$push('pages/article/detail/detail?id=114')">《用户协议》</text>规则
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import store from '@/store/index.js'
import storage from '@/utils/storage'
import * as UserPlanApi from '@/api/love-user-plan.js'
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
const service = [{
id: 1,
type: 0,
name: '无限畅聊',
desc: '每日不限次数聊天',
comments: '每天无限次聊天，让你遇到更心动的Ta！',
icon: '../../../static/icon/comment.png',
expirationTime: '2023-07-12',
plan: [{
id: 1,
name: '月卡',
price: 99
},
{
id: 2,
name: '半年卡',
price: 299
},
{
id: 3,
name: '年卡',
price: 399
}
]
},
{
id: 2,
type: 1,
name: '精准搜索',
desc: '按条件筛选结果',
comments: '按条件筛选结果',
icon: '../../../static/icon/grade-02.png',
expirationTime: '2023-07-12',
plan: [{
id: 1,
name: '月卡',
price: 99
},
{
id: 2,
name: '半年卡',
price: 299
},
{
id: 3,
name: '年卡',
price: 399
}
]
},
{
id: 3,
type: 1,
name: '会员标志',
desc: '显示会员身份',
comments: '显示会员身份',
icon: '../../../static/icon/grade-03.png',
expirationTime: '2023-07-12',
plan: [{
id: 1,
name: '月卡',
price: 99
},
{
id: 2,
name: '半年卡',
price: 299
},
{
id: 3,
name: '年卡',
price: 399
}
]
},
{
id: 4,
type: 1,
name: '查看粉丝',
desc: '允许查看粉丝',
comments: '允许查看粉丝',
icon: '../../../static/icon/grade-04.png',
expirationTime: '2023-07-12',
plan: [{
id: 1,
name: '月卡',
price: 99
},
{
id: 2,
name: '半年卡',
price: 299
},
{
id: 3,
name: '年卡',
price: 399
}
]
},
{
id: 5,
type: 1,
name: '查看证件',
desc: '允许查看证件特权',
comments: '允许查看证件特权',
icon: '../../../static/icon/grade-05.png',
expirationTime: '2023-07-12',
plan: [{
id: 1,
name: '月卡',
price: 99
},
{
id: 2,
name: '半年卡',
price: 299
},
{
id: 3,
name: '年卡',
price: 399
}
]
}
]
export default {
data() {
return {
form: {},
tabs: [{
name: '普通会员'
},
{
name: '尊享会员'
}
],
userInfo: {},
index: 0,
service: [],
where: {},
showEdit: false,
current: {},
priceId: 0,
priceName: '',
onBuyText: '立即解锁',
disabled: false
}
},
onLoad() {
this.getUserPlan()
},
onShow() {
this.userInfo = storage.get('userInfo')
this.userInfo.roleName = storage.get('roleName')
},
methods: {
// 跳转页面
navTo(url, params) {
this.$push(url, params)
},
onTabs(e) {
this.index = e.index
this.getUserPlan()
},
onPlan(item) {
this.priceId = item.id
this.priceName = item.name
console.log("this.pri: ",item);
},
openEdit(item) {
if(this.userInfo.gradeId >= 7){
uni.showToast({
title: '您已解锁此功能',
icon: 'none'
})
return
}
this.showEdit = true
this.current = item
if(item.equity && item.equity.length > 0){
this.onBuyText = '立即续费'
}else{
this.onBuyText = '立即解锁'
}
this.priceId = item.price[0].id
console.log("item: ", item);
console.log("this.current: ", this.current);
},
closeEidt() {
this.showEdit = false
this.priceId = 0
},
getUserPlan() {
const {
index
} = this
if (index == 0) {
this.where.roleId = 271
}
if (index == 1) {
this.where.roleId = 272
}
UserPlanApi.listUserPlan(this.where).then(res => {
this.service = res.data
})
},
onBuy() {
const app = this
const {
priceId,
priceName
} = this
const {
planId,
name
} = this.current
app.disabled = true
UserPlanLogApi.addUserPlanLog({
priceId,
planId,
comments: name,
priceName
}).then(res => {
const orderInfo = res.data
// 调起微信支付
uni.requestPayment({
provider: orderInfo.provider, // 服务提供商
timeStamp: orderInfo.timeStamp, // 时间戳
nonceStr: orderInfo.nonceStr, // 随机字符串
package: orderInfo.package,
signType: orderInfo.signType, // 签名算法
paySign: orderInfo.paySign, // 签名
success: function(res) {
// 业务逻辑。。。
app.$success('支付成功')
setTimeout(function() {
app.showEdit = false
app.disabled = false
app.$navTo('pages/order/index')
}, 1500);
},
fail: function(err) {
console.log('支付失败', err);
app.disabled = false
}
});
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f3f3f3 !important;
}
.grade-index {
background-color: #f3f3f3;
height: 100vh;
.user-card {
width: 700rpx;
height: 260rpx;
margin: 30rpx auto;
border-radius: 24rpx;
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
.user-info {
padding: 40rpx;
position: relative;
.avatar {
display: flex;
align-items: center;
color: #ffffff;
.avatar-img {
border: 4rpx solid #ffffff;
}
.user {
margin-left: 15rpx;
.nickname {
font-size: 34rpx;
}
.desc {
font-size: 26rpx;
color: #b2b2b2;
}
}
image {
border: 4rpx solid #ffffff;
}
}
.buy-log {
position: absolute;
z-index: 999;
text-align: center;
top: 50rpx;
right: 40rpx;
font-size: 24rpx;
padding: 5rpx 20rpx;
border-radius: 12rpx 0 12rpx 0;
background-color: #f3f3f3;
}
}
}
.form {
background-color: #ffffff;
.btn {
position: absolute;
top: 550rpx;
width: 750rpx;
height: 200rpx;
}
}
.member-service {
width: 750rpx;
.tabs {
width: 600rpx;
margin: auto;
display: flex;
justify-content: center;
}
.service-card {
width: 700rpx;
min-height: 200rpx;
margin: 30rpx auto;
border-radius: 24rpx;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
.item {
width: 190rpx;
margin: 30rpx 20rpx;
.tool-btn {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 26rpx;
.icon {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
// background: linear-gradient(to bottom, #010002, #681752);
image {
width: 50rpx;
}
}
.btn-name {
color: #333333;
}
.btn-equity{
color: #7f006f;
font-size: 24rpx;
}
.btn-desc {
color: #b2b2b2;
font-size: 24rpx;
}
}
}
}
}
}
.show-tool {
border-radius: 20rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 600rpx;
height: 600rpx;
padding: 30rpx;
.head {
padding-top: 10rpx;
width: 600rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 32rpx;
font-weight: 600;
}
.sub-title {
padding-top: 8rpx;
padding-left: 40rpx;
color: #7f006f;
font-size: 26rpx;
}
}
.desc {
color: #999999;
font-size: 26rpx;
line-height: 3rem;
}
.buy {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 160rpx;
height: 200rpx;
background-color: #ffffff;
border: 1rpx solid #dbdbdb;
border-radius: 12rpx;
color: #333333;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.nums {
font-size: 24rpx;
position: absolute;
top: 0;
left: 0;
background-color: #999999;
color: #ffffff;
padding: 0 14rpx;
border-radius: 12rpx 0 12rpx 0;
}
}
.active {
background-color: #460c47;
color: #ffc7d3;
.nums {
background-color: #ff0000;
color: #ffffff;
}
}
}
.plan-desc {
padding: 20rpx;
width: 560rpx;
height: 100rpx;
font-size: 26rpx;
color: #333333;
background-color: #dfd3e0;
}
.triangle {
width: 0;
height: 0;
margin-top: 20rpx;
border-bottom: 20rpx solid #dfd3e0;
border-right: 20rpx solid transparent;
border-left: 20rpx solid transparent;
}
}
.footer {
.btn-wrapper {
width: 360rpx;
margin: 50rpx auto;
// display: flex;
// align-items: center;
padding: 0 20rpx;
}
.xieyi {
font-size: 26rpx;
text-align: center;
color: #999999;
text {
color: #7f006f;
}
}
}
</style>

959
sub_pages/user/personal/index.vue Executable file
View File

@@ -0,0 +1,959 @@
<template>
<view class="container">
<view class="header">
<button class="btn-normal" open-type="chooseAvatar" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
<u-avatar :src="form.userInfo.avatar" :size="80"></u-avatar>
</button>
<text>点击修改头像</text>
</view>
<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" :labelStyle="{paddingLeft: '10rpx'}" label-width="240rpx">
<!-- 表单组件 -->
<view class="form-wrapper">
<u-cell-group :border="false">
<u-cell title="昵称" :isLink="true">
<u-input slot="value" class="nickname" v-model="form.userInfo.nickname" inputAlign="right" type="nickname" maxlength="8" placeholder="请输入昵称"
@input="onInputNickName" @blur="onInputNickName" />
</u-cell>
<u-cell title="手机号码" :value="form.userInfo.phone" ></u-cell>
</u-cell-group>
</view>
<block v-if="dict">
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="请选择男或女"
@close="showSex = false" @select="sexSelect">
</u-action-sheet>
<u-datetime-picker ref="datetimePicker" :show="showBirthday" v-model="birthday" mode="date" @close="closeBirthday"
@confirm="confirmBirthday" :minDate="0" :maxDate="1112102400000" @cancel="closeBirthday" :closeOnClickOverlay="true">
</u-datetime-picker>
<!-- <u-picker :show="showRegionMate" :columns="region" keyName="label" @confirm="confirmRegionMate"
@cancel="closeRegionMate"></u-picker> -->
<u-picker :show="showHeight" :columns="dict.height" @confirm="confirmHeight" @cancel="closeHeight" :closeOnClickOverlay="true" @close="closeHeight">
</u-picker>
<u-picker :show="showMonthlyPay" :columns="dict.monthlyPay" @confirm="confirmMonthlyPay"
@cancel="closeMonthlyPay" :closeOnClickOverlay="true" @close="closeMonthlyPay"></u-picker>
<u-picker :show="showYearlyPay" :columns="dict.yearlyPay" @confirm="confirmYearlyPay"
@cancel="closeYearlyPay" :closeOnClickOverlay="true" @close="closeYearlyPay"></u-picker>
<u-picker :show="showEducation" :columns="dict.education" @confirm="confirmEducation"
@cancel="closeEducation" :closeOnClickOverlay="true" @close="closeEducation"></u-picker>
<u-picker :show="showMaritalStatus" :columns="dict.maritalStatus" @confirm="confirmMaritalStatus"
@cancel="closeMaritalStatus" :closeOnClickOverlay="true" @close="closeMaritalStatus"></u-picker>
<u-picker :show="showHasChildren" :columns="dict.hasChildren" @confirm="confirmHasChildren"
@cancel="closeHasChildren" :closeOnClickOverlay="true" @close="closeHasChildren"></u-picker>
<u-picker :show="showHaveChild" :columns="dict.haveChild" @confirm="confirmHaveChild"
@cancel="closeHaveChild" :closeOnClickOverlay="true" @close="closeHaveChild"></u-picker>
<u-picker :show="showPosition" :columns="dict.vocation" @confirm="confirmPosition"
@cancel="closePosition" :closeOnClickOverlay="true" @close="closePosition"></u-picker>
<u-picker :show="showWeight" :columns="dict.weight" @confirm="confirmWeight" @cancel="closeWeight" :closeOnClickOverlay="true" @close="closeWeight">
</u-picker>
<u-picker :show="showShape" :columns="dict.shape" @confirm="confirmShape"
@cancel="closeShape" :closeOnClickOverlay="true" @close="closeShape"></u-picker>
<u-picker :show="showHasHouse" :columns="dict.hasHouse" @confirm="confirmHasHouse" @cancel="closeHasHouse" :closeOnClickOverlay="true" @close="closeHasHouse">
</u-picker>
<u-picker :show="showHasCar" :columns="dict.hasCar" @confirm="confirmHasCar" @cancel="closeHasCar" :closeOnClickOverlay="true" @close="closeHasCar">
</u-picker>
<u-picker :show="showWhenMarried" :columns="dict.whenMarried" @confirm="confirmWhenMarried"
@cancel="closeWhenMarried" :closeOnClickOverlay="true" @close="closeWhenMarried"></u-picker>
<u-picker :show="showAgeMate" :columns="dict.ageMate" @confirm="confirmAgeMate" @cancel="closeAgeMate" :closeOnClickOverlay="true" @close="closeAgeMate">
</u-picker>
<u-picker :show="showHeightMate" :columns="dict.heightMate" @confirm="confirmHeightMate"
@cancel="closeHeightMate" :closeOnClickOverlay="true" @close="closeHeightMate"></u-picker>
<u-picker :show="showMonthlyPayMate" :columns="dict.monthlyPayMate" @confirm="confirmMonthlyPayMate"
@cancel="closeMonthlyPayMate" :closeOnClickOverlay="true" @close="closeMonthlyPayMate"></u-picker>
<u-picker :show="showYearlyPayMate" :columns="dict.yearlyPayMate" @confirm="confirmYearlyPayMate"
@cancel="closeYearlyPayMate" :closeOnClickOverlay="true" @close="closeYearlyPayMate"></u-picker>
<u-picker :show="showEducationMate" :columns="dict.educationMate" @confirm="confirmEducationMate"
@cancel="closeEducationMate" :closeOnClickOverlay="true" @close="closeEducationMate"></u-picker>
<u-picker :show="showMaritalStatusMate" :columns="dict.maritalStatusMate"
@confirm="confirmMaritalStatusMate" @cancel="closeMaritalStatusMate" :closeOnClickOverlay="true" @close="closeMaritalStatusMate"></u-picker>
<u-picker :show="showHasChildrenMate" :columns="dict.hasChildrenMate" @confirm="confirmHasChildrenMate"
@cancel="closeHasChildrenMate" :closeOnClickOverlay="true" @close="closeHasChildrenMate"></u-picker>
<u-picker :show="showHaveChildMate" :columns="dict.haveChildMate" @confirm="confirmHaveChildMate"
@cancel="closeHaveChildMate" :closeOnClickOverlay="true" @close="closeHaveChildMate"></u-picker>
<u-picker :show="showPositionMate" :columns="dict.positionMate" @confirm="confirmPositionMate"
@cancel="closePositionMate" :closeOnClickOverlay="true" @close="closePositionMate"></u-picker>
<u-picker :show="showWeightMate" :columns="dict.weightMate" @confirm="confirmWeightMate"
@cancel="closeWeightMate" :closeOnClickOverlay="true" @close="closeWeightMate"></u-picker>
<u-picker :show="showShapeMate" :columns="dict.shapeMate" @confirm="confirmShapeMate"
@cancel="closeShapeMate" :closeOnClickOverlay="true" @close="closeShapeMate"></u-picker>
<u-picker :show="showIsSmokingMate" :columns="dict.isSmokingMate" @confirm="confirmIsSmokingMate"
@cancel="closeIsSmokingMate" :closeOnClickOverlay="true" @close="closeIsSmokingMate"></u-picker>
<u-picker :show="showIsDrinkMate" :columns="dict.isDrinkMate" @confirm="confirmIsDrinkMate"
@cancel="closeIsDrinkMate" :closeOnClickOverlay="true" @close="closeIsDrinkMate"></u-picker>
<u-picker :show="showHasCarMate" :columns="dict.hasCarMate" @confirm="confirmHasCarMate"
@cancel="closeHasCarMate" :closeOnClickOverlay="true" @close="closeHasCarMate"></u-picker>
<u-picker :show="showHasHouseMate" :columns="dict.hasHouseMate" @confirm="confirmHasHouseMate"
@cancel="closeHasHouseMate" :closeOnClickOverlay="true" @close="closeHasHouseMate"></u-picker>
<u-picker :show="showWhenMarriedMate" :columns="dict.whenMarriedMate" @confirm="confirmWhenMarriedMate"
@cancel="closeWhenMarriedMate" :closeOnClickOverlay="true" @close="closeWhenMarriedMate"></u-picker>
<!-- 地址选择器 -->
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
<!-- 地址选择器 -->
<liu-customize-sel ref="areaMate" @change="chooseSuccessMate"></liu-customize-sel>
</block>
</u--form>
<view class="" style="height: 300rpx;">
</view>
<!-- 操作按钮 -->
<view class="footer">
<view class="btn-wrapper">
<u-button text="保存" color="linear-gradient(#27b0fd, #3f72f4)" :disabled="disabled"
shape="circle" @click="handleSubmit()"></u-button>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import {
fileUrl
} from '@/config.js'
import {
dateFormat
} from '@/utils/util.js'
import * as UserApi from '@/api/user'
import * as UserProfileApi from '@/api/love-user-profile.js'
import * as UploadApi from '@/api/upload'
import * as DictApi from '@/api/dict.js'
// tab栏数据
const tabs = [{
name: `基本信息`,
value: 10
}, {
name: `择偶条件`,
value: 20
}]
export default {
data() {
return {
tabs,
tabIndex: 10,
dict: null,
// 按钮禁用
disabled: false,
// 头像路径 (用于显示)
avatarUrl: '',
// 临时图片 (用于上传)
tempFile: null,
// 表单数据
form: {
userInfo: null
},
// 用户资料
mate: {
},
fileList1: [],
interest: [],
loading: false,
// regionsData: [
// ['广西壮族自治区','广东'],
// ['南宁市', '北海市', '贵港市']
// ],
showRegion: false,
showRegionMate: false,
showSex: false,
showBirthday: false,
showMonthlyPay: false,
showYearlyPay: false,
showEducation: false,
showMaritalStatus: false,
showHasChildren: false,
showHaveChild: false,
showPosition: false,
showHeight: false,
showWeight: false,
showShape: false,
showHasHouse: false,
showHasCar: false,
showWhenMarried: false,
showAgeMate: false,
showHeightMate: false,
showMonthlyPayMate: false,
showYearlyPayMate: false,
showEducationMate: false,
showMaritalStatusMate: false,
showHasChildrenMate: false,
showHaveChildMate: false,
showPositionMate: false,
showWeightMate: false,
showShapeMate: false,
showIsSmokingMate: false,
showIsDrinkMate: false,
showHasCarMate: false,
showHasHouseMate: false,
showWhenMarriedMate: false,
actions: [{
name: '男',
},
{
name: '女',
},
{
name: '保密',
},
],
minDate: '',
columnsHeight: [
['160cm', '170cm', '180cm']
],
birthday: Number(new Date()),
// 验证规则
rules: {
'nickname': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
'sexName': {
type: 'string',
max: 2,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
},
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
this.getUserProfile()
this.getDict()
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
// this.$refs.uForm.setRules(this.rules)
// 微信小程序需要用此写法
// this.$refs.datetimePicker.setFormatter(this.formatter)
},
methods: {
// 用户资料表
getUserProfile() {
const app = this
const userId = uni.getStorageSync('userId')
UserProfileApi.getUserProfile(userId).then(res => {
app.form = res.data
const userInfo = res.data.userInfo
app.form.avatar = userInfo.avatar
app.form.nickname = userInfo.nickname
app.form.comments = userInfo.comments
app.form.sexName = userInfo.sexName
app.form.birthday = userInfo.birthday
app.interest = JSON.parse(app.form.interest) || []
app.fileList1 = JSON.parse(app.form.images) || []
app.isLogin = false
}).catch(err => {
app.$success(err)
})
},
getDict() {
DictApi.listDictionary().then(res => {
this.dict = res.data;
})
},
onChangeTab(e) {
const app = this
app.tabIndex = e.value
},
sexSelect(e) {
const app = this
console.log("e.name: ", e.name);
app.form.sexName = e.name
if (e.name == '男') {
app.form.userInfo.sex = 1
}
if (e.name == '女') {
app.form.userInfo.sex = 2
}
if (e.name == '保密') {
app.form.userInfo.sex = 0
}
console.log("app.form.userInfo.sex: ", app.form.userInfo.sex);
this.$refs.uForm.validateField('sexName')
},
// 选择微信地址
// #ifdef MP-WEIXIN
chooseAddress() {
const {
form,
$refs
} = this
uni.chooseAddress({
success(res) {
const names = $refs.sRegion.getOptionItemByNames(res)
form.name = res.userName
form.phone = res.telNumber
form.detail = res.detailInfo
form.region = names.length > 0 ? names : []
}
})
},
// #endif
// 点击头像按钮事件
onClickAvatar() {
// #ifdef MP-WEIXIN
return
// #endif
this.chooseImage()
},
// 选择头像事件 - 仅限微信小程序
// #ifdef MP-WEIXIN
onChooseAvatar({
detail
}) {
const app = this
app.form.userInfo.avatar = detail.avatarUrl
app.tempFile = detail.avatarUrl
// 上传头像图片
app.uploadFile()
},
// #endif
// 选择图片
chooseImage() {
const app = this
console.log("选择图片: ");
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(chooseImageRes) {
const tempFilePaths = chooseImageRes.tempFilePaths;
UploadApi.uploadFile({
filePath: tempFilePaths[0],
fileType: 'image',
name: 'file'
}).then(res => {
console.log("res: ", res);
app.form.avatar = fileUrl + res.data.path
console.log("form: ", app.form);
})
}
});
},
// 上传图片
uploadFile() {
const app = this
UploadApi.uploadFile({
filePath: app.tempFile,
fileType: 'image',
name: 'file'
}).then(res => {
app.form.userInfo.avatar = res.data.url
UserProfileApi.updateUserProfile(app.form)
})
},
// 确认修改
async handleSubmit() {
const app = this
if (app.disabled === true) return
console.log("app.tempFile: ", app.tempFile);
this.$refs.uForm.validate().then(() => {
app.form.interest = JSON.stringify(app.interest)
app.form.images = JSON.stringify(app.fileList1)
UserProfileApi.updateUserProfile(app.form).then(result => {
app.$toast(result.message)
}).catch(err => {
uni.$u.toast(err)
})
}).catch(errors => {
// uni.$u.toast('校验失败')
})
// 判断是否重复提交
// if (app.disabled === true) return
// app.$refs.uForm.validate(async valid => {
// if (valid) {
// console.log("valid: ", valid);
// // 按钮禁用
// app.disabled = true
// // 先上传头像图片
// if (app.tempFile) {
// await app.uploadFile()
// }
// // 提交保存个人信息
// UserApi.updateUser(app.form)
// .then(result => {
// app.$toast(result.message)
// setTimeout(() => {
// app.disabled = false
// uni.navigateBack()
// }, 1500)
// })
// .catch(err => app.disabled = false)
// }
// })
},
onInterest(text) {
const app = this
if (app.interest.indexOf(text) > -1) {
console.log("1: ");
app.interest.splice(app.interest.indexOf(text), 1)
} else {
console.log("2: ");
app.interest.push(text)
}
},
inArr(text) {
const {
interest
} = this
if (interest.indexOf(text) > -1) {
return false
}
return true
},
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
onInputNickName(val) {
console.log("val: ", val);
if (val) {
this.form.nickname = val
}
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
console.log("value: ", value);
return value
},
onArea() {
this.$refs.area.open()
},
//地址选择成功
chooseSuccess(e) {
const data = e.value
this.form.province = data[0].label
this.form.city = data[1].label
this.form.region = data[2].label
this.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
// 同步user表
this.form.userInfo.province = data[0].label
this.form.userInfo.city = data[1].label
this.form.userInfo.region = data[2].label
this.form.userInfo.address = `${data[0].label} ${data[1].label} ${data[2].label}`
},
onAreaMate() {
this.$refs.areaMate.open()
},
//地址选择成功
chooseSuccessMate(e) {
const data = e.value
this.form.provinceMate = data[0].label
this.form.cityMate = data[1].label
this.form.regionMate = data[2].label
this.form.areaMate = `${data[0].label} ${data[1].label} ${data[2].label}`
},
changeHandler(e) {
console.log("e: ", e);
},
confirmRegion(e) {
this.form.region = e.value[0] + ' ' + e.value[1]
this.showRegion = false
},
confirmRegionMate(e) {
this.form.regionMate = e.value[0] + ' ' + e.value[1]
this.showRegionMate = false
this.showRegion = false
},
confirmBirthday(e) {
const birthday = dateFormat('YYYY-mm-dd', new Date(e.value))
this.form.birthday = birthday
this.form.userInfo.birthday = birthday
this.showBirthday = false
// 计算年龄
const birthdayYear = dateFormat('YYYY', new Date(e.value))
const age = new Date().getFullYear() - birthdayYear
this.form.age = age
this.form.userInfo.age = age
},
confirmHeight(e) {
console.log("e: ", e);
this.form.height = e.value[0]
this.showHeight = false
},
confirmMonthlyPay(e) {
this.form.monthlyPay = e.value[0]
this.showMonthlyPay = false
},
confirmYearlyPay(e){
this.form.yearlyPay = e.value[0]
this.showYearlyPay = false
},
confirmEducation(e) {
this.form.education = e.value[0]
this.showEducation = false
},
confirmMaritalStatus(e) {
this.form.maritalStatus = e.value[0]
this.showMaritalStatus = false
},
confirmHasChildren(e) {
this.form.hasChildren = e.value[0]
this.showHasChildren = false
},
confirmHaveChild(e) {
this.form.haveChild = e.value[0]
this.showHaveChild = false
},
confirmPosition(e) {
this.form.position = e.value[0]
this.showPosition = false
},
confirmWeight(e) {
this.form.weight = e.value[0]
this.showWeight = false
},
confirmShape(e) {
this.form.shape = e.value[0]
this.showShape = false
},
confirmHasHouse(e) {
this.form.hasHouse = e.value[0]
this.showHasHouse = false
},
confirmHasCar(e) {
this.form.hasCar = e.value[0]
this.showHasCar = false
},
confirmWhenMarried(e) {
this.form.whenMarried = e.value[0]
this.showWhenMarried = false
},
confirmAgeMate(e) {
this.form.ageMate = e.value[0]
this.showAgeMate = false
},
confirmHeightMate(e) {
this.form.heightMate = e.value[0]
this.showHeightMate = false
},
confirmMonthlyPayMate(e) {
this.form.monthlyPayMate = e.value[0]
this.showMonthlyPayMate = false
},
confirmYearlyPayMate(e) {
this.form.yearlyPayMate = e.value[0]
this.showYearlyPayMate = false
},
confirmEducationMate(e) {
this.form.educationMate = e.value[0]
this.showEducationMate = false
},
confirmMaritalStatusMate(e) {
this.form.maritalStatusMate = e.value[0]
this.showMaritalStatusMate = false
},
confirmHasChildrenMate(e) {
this.form.hasChildrenMate = e.value[0]
this.showHasChildrenMate = false
},
confirmHaveChildMate(e) {
this.form.haveChildMate = e.value[0]
this.showHaveChildMate = false
},
confirmPositionMate(e) {
this.form.vocationMate = e.value[0]
this.showPositionMate = false
},
confirmWeightMate(e) {
this.form.weightMate = e.value[0]
this.showWeightMate = false
},
confirmShapeMate(e) {
this.form.shapeMate = e.value[0]
this.showShapeMate = false
},
confirmIsSmokingMate(e) {
this.form.isSmokingMate = e.value[0]
this.showIsSmokingMate = false
},
confirmIsDrinkMate(e) {
this.form.isDrinkMate = e.value[0]
this.showIsDrinkMate = false
},
confirmHasCarMate(e) {
this.form.hasCarMate = e.value[0]
this.showHasCarMate = false
},
confirmHasHouseMate(e) {
this.form.hasHouseMate = e.value[0]
this.showHasHouseMate = false
},
confirmWhenMarriedMate(e) {
this.form.whenMarriedMate = e.value[0]
this.showWhenMarriedMate = false
},
closeRegionMate() {
this.showRegionMate = false
},
closeBirthday() {
this.showBirthday = false
},
closeHeight() {
this.showHeight = false
},
closeHeight() {
this.showHeight = false
},
closeMonthlyPay() {
this.showMonthlyPay = false
},
closeEducation() {
this.showEducation = false
},
closeMaritalStatus() {
this.showMaritalStatus = false
},
closeHasChildren() {
this.showHasChildren = false
},
closeHaveChild() {
this.showHaveChild = false
},
closePosition() {
this.showPosition = false
},
closeHeight() {
this.showHeight = false
},
closeWeight() {
this.showWeight = false
},
closeHasCar() {
this.showHasCar = false
},
closeYearlyPayMate(){
this.showYearlyPayMate = false
},
closeYearlyPay(){
this.showYearlyPay = false
},
closeShape(){
this.showShape = false
},
closeHasHouse() {
this.showHasHouse = false
},
closeWhenMarried() {
this.showWhenMarried = false
},
closeAgeMate() {
this.showAgeMate = false
},
closeHeightMate() {
this.showHeightMate = false
},
closeMonthlyPayMate() {
this.showMonthlyPayMate = false
},
closeEducationMate() {
this.showEducationMate = false
},
closeMaritalStatusMate() {
this.showMaritalStatusMate = false
},
closeHasChildrenMate() {
this.showHasChildrenMate = false
},
closeHaveChildMate() {
this.showHaveChildMate = false
},
closePositionMate() {
this.showPositionMate = false
},
closeWeightMate() {
this.showWeightMate = false
},
closeShapeMate() {
this.showShapeMate = false
},
closeIsSmokingMate() {
this.showIsSmokingMate = false
},
closeIsDrinkMate() {
this.showIsDrinkMate = false
},
closeHasCarMate() {
this.showHasCarMate = false
},
closeHasHouseMate() {
this.showHasHouseMate = false
},
closeWhenMarriedMate() {
this.showWhenMarriedMate = false
},
pickerRegion(e) {
console.log("e: ", e);
},
chooseBgImage() {
const app = this;
uni.showActionSheet({
itemList: ['更换背景图'],
success() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(chooseImageRes) {
const tempFilePaths = chooseImageRes.tempFilePaths;
app.uploadFilePromise(tempFilePaths[0]).then(result=>{
app.form.userInfo.bgImage = result.url
console.log(app.form, result.url);
})
}
});
}
})
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
console.log("event: ", event);
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result.url,
thumb: result.thumbUrl
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
UploadApi.uploadFile({
filePath: url,
fileType: 'image',
name: 'file',
header: {
Authorization: uni.getStorageSync('AccessToken')
},
}).then(result => {
setTimeout(() => {
resolve(result.data)
}, 1000)
}).catch(err => {
console.log("err: ", err);
})
// UploadApi.uploadFile()
// let a = uni.uploadFile({
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
// filePath: url,
// name: 'file',
// header: {
// Authorization: uni.getStorageSync('AccessToken')
// },
// formData: {
// user: 'test'
// },
// success: (res) => {
// const result = JSON.parse(res.data)
// setTimeout(() => {
// resolve(result)
// }, 1000)
// }
// });
})
},
}
}
</script>
<style>
page {
background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.container {}
.bg {
width: 750rpx;
height: 100%;
position: absolute;
top: 0;
z-index: 0;
background-color: #0d0119;
opacity: .3;
}
.page-title {
width: 94%;
margin: 0 auto;
padding-top: 40rpx;
font-size: 28rpx;
color: rgba(69, 90, 100, 0.6);
}
.header {
height: 220rpx;
padding: 40rpx 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: url('https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rww72n.jpg') no-repeat;
background-size: 100%;
color: #cccccc;
font-size: 24rpx;
position: relative;
overflow: hidden;
button{
background: none;
}
text {
padding: 12rpx 0;
}
}
.form-wrapper {
margin: 20rpx auto 20rpx auto;
padding: 20rpx;
width: 680rpx;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.nickname{
text-align: right !important;
}
.interest {
padding: 10rpx;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.u-page__tag-item {
margin-bottom: 10rpx;
margin-right: 10rpx;
white-space: nowrap;
}
}
}
/* 底部操作栏 */
.footer {
margin-top: 50rpx;
padding-bottom: 50rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-top: 20rpx;
.btn-wrapper {
width: 360rpx;
margin: auto;
// display: flex;
// align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 86rpx;
color: #fff;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn-item-wechat {
background: #0ba90b;
margin-bottom: 26rpx;
}
.btn-item-main {
background: linear-gradient(to right, $main-bg, $main-bg2);
color: $main-text;
// 禁用按钮
&.disabled {
opacity: 0.6;
}
}
}
.tabs {
width: 700rpx;
margin: auto;
display: flex;
justify-content: center;
}
.textarea{
background-color: #f3f3f3;
}
.images{
padding: 10rpx;
}
.his-head {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 30rpx;
padding: 20rpx 0 20rpx 0;
color: #681752;
.line {
background-color: #681752;
width: 8rpx;
height: 30rpx;
margin-right: 12rpx;
}
.icon {
float: right;
}
}
</style>

547
sub_pages/user/poster/poster.vue Normal file
View File

@@ -0,0 +1,547 @@
<template>
<view class="container">
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop placeholder
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
<view class="bg-image"></view>
<view class="content">
<view style="display: flex;justify-content: center;position: relative;flex-direction: column;align-items: center;margin-top: 72rpx;height: 800rpx;" class="">
<image style="width: 640rpx;position: absolute; top: 0;" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/yaoqinghaoyouzhuanjiangli.png" mode="widthFix"></image>
<image class="head-box" src="https://oss.jimeigroup.cn/static/poster-head21.png" mode="widthFix"></image>
<view class="poster-btn">
<view class="poster-wrapper">
<view class="poster-desc">
<view class="poster-desc-title">
邀请好友奖励如下
</view>
<view class="poster-list">
<view class="item">邀请<text class="b">注册用户</text>：获得好友充值的奖励</view>
<view class="item">邀请<text class="b">普通会员</text>：获得好友充值的奖励</view>
<view class="item">邀请<text class="b">尊享用户</text>：获得好友充值的奖励</view>
</view>
</view>
<image @click="$push('sub_pages/user/poster/poster2')" class="btn-share" src="https://oss.jimeigroup.cn/static/haibaofenxiang.png" mode="widthFix"></image>
<!-- <u-button text="海报分享" color="#ffffff"
:customStyle="{color: '#000000',fontWeight: '600', marginBottom: '70rpx'}" :disabled="disabled"
shape="circle" @click="$push('sub_pages/user/poster/poster2')"></u-button> -->
</view>
</view>
</view>
<view class="">
<image class="rank-top" src="https://oss.jimeigroup.cn/static/yaoqinghaoyouzhuanjiangli2.png" mode="widthFix"></image>
<view class="ranking">
<!-- <view class="title">—— 排行榜 ——</view> -->
<view class="list">
<u-list height="600rpx" @scrolltolower="scrolltolower">
<u-list-item v-for="(item, index) in ranking" :key="index">
<view style="display: flex;justify-content: space-between; margin-top: 10rpx; padding: 20rpx; height: 50rpx;align-items: center;" class="cell">
<view style="display: flex;align-items: center; line-height: 50rpx;" class="">
<view v-if="index >= 3" style="margin-right: 22rpx;width: 64rpx;display: flex;justify-content: center;" class="">{{index + 1}}</view>
<image v-if="index < 3" style="width: 64rpx; height: 64rpx;margin-right: 22rpx; padding-top: 20rpx;" :src="item.icon" mode="widthFix"></image>
<u-avatar shape="circle" size="30" :src="item.avatar"></u-avatar>
<view style="color: rgb(255, 235, 211);font-size: 28rpx; margin-left: 10rpx;" class="">{{item.nickname}}</view>
</view>
<view style="color: rgb(255, 235, 211);font-size: 28rpx;" class="">
共奖励<text style="color: rgb(242, 67, 116);">{{item.value}}</text>元
</view>
</view>
</u-list-item>
</u-list>
</view>
</view>
</view>
</view>
<!-- <view class="form" @click="onShowQrcode">
<view class="btn">
</view>
</view> -->
<u-popup :show="showQrcode" mode="center" :round="10" @close="showQrcode = false">
<view class="qrcode-box">
<view class="poster">
<image :src="posterUrl" mode="widthFix">
</view>
<view class="gap">立即分享</view>
<view class="share">
<view class="btn">
<!-- <image src="../../../static/icon/share01.png" mode="widthFix"></image> -->
<u-button @click="onSahreQuan" text="朋友圈" icon="https://file.wsdns.cn/20230710/447306d3788a4fcdb6c5a9c7b8d9147d.png" :plain="true" size="normal" :customStyle="{border: 'none'}" :hairline="false" open-type="share"></u-button>
</view>
<view class="btn">
<u-button @click="onShareWeixin" text="微信好友" icon="https://file.wsdns.cn/20230710/ebb9586ef759415585db3bbc55574321.png" :plain="true" size="normal" :customStyle="{border: 'none'}" open-type="share"></u-button>
</view>
<view class="btn">
<u-button @click="onShareAlbum" text="保存相册" icon="https://file.wsdns.cn/20230710/da05c38686b349debde3063f4203e20a.png" :plain="true" size="normal" :customStyle="{border: 'none'}"></u-button>
</view>
</view>
</view>
</u-popup>
<!-- 海报绘制 -->
<l-painter custom-style="position: fixed; left: 200%" isCanvasToTempFilePath @success="drawSuccess" css="height: 732rpx; width: 580rpx;" file-type="png">
<template v-if="userInfo && QrcodeUrl" >
<l-painter-view
css="height: 732rpx; width: 580rpx;borderRadius: 20rpx; backgroundColor: #fff; position: relative;"
>
<!-- 小程序码 -->
<l-painter-image
src="https://oss.jimeigroup.cn/static/invite-head.png?x-oss-process=image/resize,w_1500/format,webp"
css="width: 580rpx; height: 632rpx; borderRadius: 20rpx 20rpx 0 0;"
/>
<l-painter-view
css=" position: absolute; bottom: 110rpx;left:20rpx;"
>
<l-painter-view>
<l-painter-image
:src="QrcodeUrl"
css="width: 140rpx; height: 140rpx;"
/>
</l-painter-view>
<l-painter-view
css="width: 280rpx; height: 80rpx; display: flex; align-items: center;"
>
<l-painter-image
:src="userInfo.avatar"
css="width: 40rpx; height: 40rpx; borderRadius:50%;margin-right: 20rpx;"
/>
<l-painter-view
css="font-size: 26rpx; display: flex; flex-direction: column;"
>
<l-painter-text :text="userInfo.nickname" css="textAlign: left; color: #FFFFFF;"/>
<!-- <l-painter-text :text="userInfo.mobile" css="textAlign: left; color: #999999;"/> -->
</l-painter-view>
</l-painter-view>
</l-painter-view>
<l-painter-view css="width: 100%;textAlign: center;height: 100rpx;line-height:100rpx;">
<l-painter-text
text="长按识别二维码"
css="textAlign: center; color: #000000;"
/>
</l-painter-view>
</l-painter-view>
</template>
</l-painter>
</view>
</template>
<script>
import * as WxLoginApi from '@/api/wx-login.js'
import store from '@/store/index.js'
import storage from '@/utils/storage'
const userId = uni.getStorageSync('userId')
const userInfo = uni.getStorageSync('userInfo')
export default {
data() {
return {
userId,
userInfo,
form: {},
showQrcode: false,
QrcodeUrl: '',
ranking: [{
icon: 'https://oss.jimeigroup.cn/static/1.png',
avatar: 'https://oss.jimeigroup.cn/20230724/204f1dd2920648b49703255daf51b494.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
nickname: '茶色',
value: '5142.00'
},{
icon: 'https://oss.jimeigroup.cn/static/2.png',
avatar: 'https://oss.jimeigroup.cn/20230724/4fd091aca58f4dcface4e906e0a2d50f.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
nickname: '李开心',
value: '3006.12'
},{
icon: 'https://oss.jimeigroup.cn/static/3.png',
avatar: 'https://oss.jimeigroup.cn/20230724/19898741661d443a9afb9fe83ab513cf.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
nickname: 'Kris',
value: '1982.06'
},{
avatar: 'https://oss.jimeigroup.cn/20230724/302bf7b247344c8dbac162eca421cf20.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
nickname: '薄荷',
value: '1306.60'
},{
avatar: 'https://oss.jimeigroup.cn/20230724/7fb23c8cabfc4588b91ecbf1087ffe0e.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
nickname: '米兰',
value: '1013.96'
}],
posterUrl: ''
}
},
onLoad() {
this.getQrCode()
},
onShareTimeline(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '高端婚恋交友平台',
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
}
},
onShareAppMessage() {
return {
title: '高端婚恋交友平台',
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
imageUrl: 'https://oss.jimeigroup.cn/static/mp-share.png'
}
},
methods: {
drawSuccess(e){
this.posterUrl = e
// uni.previewImage({
// urls: [e]
// })
},
onShowQrcode() {
this.showQrcode = true
this.getQrCode()
},
// 获取微信小程序码
getQrCode() {
const app = this
WxLoginApi.getWxQrCodeFile().then(res => {
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
// app.showQrcode = true
storage.set('QrcodeUrl', res.message)
}).catch(err => {
app.$error(err.message)
})
},
onShareQuan(){
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 2,
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
onShareWeixin(){
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 5,
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
title: '爱尚客',
miniProgram: {
id: 'gh_39f1f8019c3f',
path: 'pages/index/index',
type: 0,
webUrl: 'http://uniapp.dcloud.io'
},
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
onShareAlbum(){
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePaths[0],
// success: function () {
// console.log('save success');
// }
// });
uni.getSetting({ //获取用户的当前设置
success: (res) => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum();
} else {
uni.authorize({ //如果没有授权，向用户发起请求
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum();
},
fail: () => {
uni.showToast({
title: "请打开保存相册权限，再点击保存相册分享",
icon: "none",
duration: 3000
});
setTimeout(() => {
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: (res2) => {
// console.log(res2.authSetting)
}
});
}, 3000);
}
})
}
}
})
},
saveImageToPhotosAlbum() {
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
uni.showLoading({
title: '加载中',
mask: true
})
uni.getFileSystemManager().writeFile({
filePath: filePath, //创建一个临时文件名
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function(res2) {
uni.hideLoading();
uni.showToast({
title: '保存成功，请从相册选择再分享',
icon: "none",
duration: 5000
})
},
fail: function(err) {
uni.hideLoading();
// console.log(err.errMsg);
}
})
},
fail: err => {
uni.hideLoading();
//console.log(err)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.bg-image{
position: fixed;
width: 750rpx;
height: 100vh;
background-image: url('https://oss.jimeigroup.cn/static/poster-bg21.jpg');
background-repeat: no-repeat;
background-size: 100%;
top: 0;
left: 0;
z-index: -1;
}
.content{
z-index: 90;
}
.head-box{
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 750rpx;
top: -130rpx;
}
.rank-top{
width: 634rpx;
margin: 30rpx 58rpx;
}
.container {
.poster-title {
width: 750rpx;
padding: 60rpx 0;
text-align: center;
font-family: FZZongYi;
font-weight: 400;
font-size: 70rpx;
color: rgba(255, 255, 255, 1);
font-style: normal;
letter-spacing: 0px;
line-height: 70rpx;
text-decoration: none;
}
.poster-btn {
width: 600rpx;
margin: 20rpx auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: absolute;
top: 150rpx;
.poster-wrapper {
color: #333333;
width: 450rpx;
height: 520rpx;
display: flex;
flex-direction: column;
.poster-desc {
.poster-desc-title {
padding-top: 60rpx;
padding-bottom: 30rpx;
font-size: 44rpx;
text-align: center;
line-height: 40rpx;
font-weight: bold;
}
.poster-list {
text-align: center;
font-size: 28rpx;
line-height: 64rpx;
.b{
font-weight: bold;
}
}
}
}
.btn-share{
width: 200rpx;
margin: 95rpx auto 0;
}
// width: 600rpx;
// margin: auto;
// background: url('https://file.wsdns.cn/20230710/b68c9d11ad744dc880217ee82af24f07.png');
// background-repeat: no-repeat;
// background-size: 100%;
}
.ranking {
margin: 0 auto;
width: 634rpx;
height: 500rpx;
background: rgba(15, 0, 32, 0.5);
border: 1px solid rgb(151, 99, 157);
color: #ffffff;
border-radius: 20rpx;
.title {
text-align: center;
padding: 20rpx 0;
font-size: 34rpx;
text-align: center;
line-height: 40rpx;
}
}
.form {
background-color: #ffffff;
.btn {
position: absolute;
top: 350rpx;
width: 750rpx;
height: 500rpx;
}
}
}
.btn-wrapper {
background: none;
width: 360rpx;
margin: 50rpx auto;
// display: flex;
// align-items: center;
padding: 0 20rpx;
}
.qrcode-box {
border-radius: 20rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 660rpx;
height: 1000rpx;
.poster {
width: 580rpx;
height: 733rpx;
margin: 40rpx auto;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 20rpx;
display: flex;
flex-direction: column;
image {
width: 580rpx;
border-radius: 20rpx 20rpx 0 0;
}
.user {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.avatar {
display: flex;
align-items: center;
height: 200rpx;
.user-info {
display: flex;
flex-direction: column;
font-size: 26rpx;
.phone {
color: #999999;
}
}
}
.qrcode-img {
width: 140rpx;
}
}
.long-press {
color: #999999;
font-size: 26rpx;
text-align: center;
}
}
.gap {
font-size: 28rpx;
margin: auto;
color: #999999;
}
.share {
margin: auto;
display: flex;
justify-content: space-between;
font-size: 26rpx;
.btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: #666666;
image {
width: 50rpx;
height: 50rpx;
}
}
}
}
</style>

366
sub_pages/user/poster/poster2.vue Normal file
View File

@@ -0,0 +1,366 @@
<template>
<view class="container">
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
<view class="poster-main">
<image class="poster-main-img" src="https://oss.jimeigroup.cn/static/haoyou-bg.png"
mode="widthFix"></image>
<!-- <view class="user-info">
<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
<view class="info">
<view class="nickname">
{{userInfo.nickname}}
</view>
<view class="phone">
{{userInfo.phone}}
</view>
</view>
</view> -->
<image class="qrcode" :src="QrcodeUrl">
</view>
<view class="poster-footer">
<!-- <view class="poster-footer-title">
— 立即分享 —
</view> -->
<view class="poster-footer-btns">
<button open-type="share" class="poster-footer-btn u-reset-button">
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-share.png" mode="aspectFill">
</image>
<view class="poster-footer-btn-text">分享微信好友</view>
</button>
<view @click="drawPoster" class="poster-footer-btn">
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-save.png" mode="aspectFill"></image>
<view class="poster-footer-btn-text">保存相册分享</view>
</view>
</view>
</view>
<!-- 海报绘制 -->
<l-painter custom-style="position: fixed;left: 200%;" ref="painter" @success="drawSuccess"
css="height: 1067px; width: 750px;" file-type="jpg">
<template>
<l-painter-view
css="background-image: url(https://oss.jimeigroup.cn/static/post-bg3.jpg); width: 750px;height: 1067px;">
<l-painter-view
css="background-image: url(https://oss.jimeigroup.cn/static/haoyou-bg.png); width: 750px;height: 1067px;position:relative;">
<!-- 用户头像、昵称 -->
<!-- <l-painter-view style="display: flex;" css="display: flex;align-items: center;position: absolute;left: 150px; bottom: 150px;">
<l-painter-image
css="width: 75px;height: 75px;border-radius: 50%"
:src="userInfo.avatar"></l-painter-image>
<l-painter-view css="margin-left: 20px;">
<l-painter-view css="height: 40px;line-height: 40px;"><l-painter-text :text="userInfo.nickname" css="font-size: 28px" style=";"></l-painter-text></l-painter-view>
<l-painter-view css="height: 40px;line-height: 40px;"> <l-painter-text :text="userInfo.phone" css="font-size: 24px"></l-painter-text></l-painter-view>
</l-painter-view>
</l-painter-view> -->
<!-- 二维码 -->
<l-painter-image
css="position: absolute;right: 150px;bottom: 150px;width: 160px;height: 160px;"
:src="QrcodeUrl"></l-painter-image>
</l-painter-view>
</l-painter-view>
</template>
</l-painter>
</view>
</template>
<script>
import * as WxLoginApi from '@/api/wx-login.js'
import store from '@/store/index.js'
import storage from '@/utils/storage'
const userId = uni.getStorageSync('userId')
const userInfo = uni.getStorageSync('userInfo')
export default {
data() {
return {
userId,
userInfo,
form: {},
showQrcode: false,
QrcodeUrl: '',
ranking: [{
avatar: '',
nickname: '别来无恙',
value: '共奖励5012.00元'
}],
posterUrl: ''
}
},
onLoad() {
this.getQrCode()
},
onShareTimeline(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '爱尚客',
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
}
},
onShareAppMessage() {
return {
title: '高端婚恋交友平台',
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
imageUrl: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/mp-share.png'
}
},
methods: {
drawPoster() {
this.$refs.painter.canvasToTempFilePath({
// x: 0,
// y: 170,
// with: 750,
// height: 1067,
fileType: "jpg",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
// console.log(res.tempFilePath);
// uni.previewImage({
// urls: [res.tempFilePath]
// })
// 非H5 保存到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '已保存相册'
})
}
});
},
});
},
drawSuccess(e) {
this.posterUrl = e
// uni.previewImage({
// urls: [e]
// })
},
onShowQrcode() {
this.showQrcode = true
this.getQrCode()
},
// 获取微信小程序码
getQrCode() {
const app = this
WxLoginApi.getWxQrCodeFile().then(res => {
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
// app.showQrcode = true
storage.set('QrcodeUrl', res.message)
}).catch(err => {
app.$error(err.message)
})
},
onShareQuan() {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 2,
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
onShareWeixin() {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 5,
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
title: '爱尚客',
miniProgram: {
id: 'gh_39f1f8019c3f',
path: 'pages/index/index',
type: 0,
webUrl: 'http://uniapp.dcloud.io'
},
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
onShareAlbum() {
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePaths[0],
// success: function () {
// console.log('save success');
// }
// });
uni.getSetting({ //获取用户的当前设置
success: (res) => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum();
} else {
uni.authorize({ //如果没有授权，向用户发起请求
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum();
},
fail: () => {
uni.showToast({
title: "请打开保存相册权限，再点击保存相册分享",
icon: "none",
duration: 3000
});
setTimeout(() => {
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: (res2) => {
// console.log(res2.authSetting)
}
});
}, 3000);
}
})
}
}
})
},
saveImageToPhotosAlbum() {
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
uni.showLoading({
title: '加载中',
mask: true
})
uni.getFileSystemManager().writeFile({
filePath: filePath, //创建一个临时文件名
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function(res2) {
uni.hideLoading();
uni.showToast({
title: '保存成功，请从相册选择再分享',
icon: "none",
duration: 5000
})
},
fail: function(err) {
uni.hideLoading();
// console.log(err.errMsg);
}
})
},
fail: err => {
uni.hideLoading();
//console.log(err)
}
})
}
}
}
</script>
<style>
page {
background-color: #730070;
}
</style>
<style lang="scss" scoped>
.container {
background-image: url(https://oss.jimeigroup.cn/static/login-bg01.png);
background-repeat: no-repeat;
min-height: 100vh;
width: 750rpx;
background-size: 100%;
}
.poster-main {
margin: 170rpx auto 0;
display: flex;
justify-content: center;
position: relative;
.qrcode {
position: absolute;
right: 150rpx;
bottom: 150rpx;
width: 160rpx;
height: 160rpx;
}
.poster-main-img {
width: 750rpx;
}
}
.poster-footer {
color: #FFFFFF;
}
.poster-footer-title {
// height: 80rpx;
font-size: 32rpx;
// font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
// line-height: 80rpx;
}
.poster-footer-btns {
display: flex;
justify-content: space-between;
width: 600rpx;
margin: 0 auto;
}
.poster-footer-btn {
flex: 1;
text-align: center;
&-icon {
width: 80rpx;
height: 80rpx;
}
&-text {
font-size: 28rpx;
}
}
.user-info{
position: absolute;
left: 150rpx;
bottom: 160rpx;
display: flex;
align-items: center;
.avatar{
width: 75rpx;
height: 75rpx;
border-radius: 50%;
}
.info {
margin-left: 20rpx;
}
.nickname{
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
.phone {
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
}
</style>