Skip to content

G
gxpt_wechat
Commit 8c8e281e by zhangzhen
Options

功能开发优化

parent c43fb4b1
Showing with 510 additions and 66 deletions
config/index.config.js
const CONFIG = {
// 开发环境配置
development: {
// assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径
assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径
assetsPath: 'http://coujiao.pseer.com:8888/wechat_static', // 静态资源路径
// assetsPath: 'http://10.24.5.63:8211/static', // 静态资源路径
assetsPath: 'http://10.24.5.63:8211/static', // 静态资源路径
// baseUrl: 'https://www.coujio.com/front-api', // 后台接口请求地址
baseUrl: 'https://coujiao.pseer.com/front-api', // 后台接口请求地址
// hostUrl: 'http://coujiao.pseer.com:8888/prod-api', // H5地址(前端运行地址)
......
pages/my/myInfo.vue
......@@ -630,6 +630,7 @@
}
console.log(this.userInfo,999999)
uni.setStorageSync('userInfo', this.userInfo)
this.$forceUpdate();
this.onGetOrderInfo();
}
})
......
pages/userShare/userShare.vue 0 → 100644
<template>
<view class="user-share">
<view class="header-part">
<view v-if="loginStatus" class="flex-between">
<view class="flex-row user-info">
<image class="avatar-img" :src="userInfo.avatar|| assetsPath+'/logo_icon.png'" mode="scaleToFill">
</image>
<view class="">
<text>{{userInfo.nickName || '凑角会员_'+userName}}</text>
</view>
</view>
</view>
<view v-else class="logo-box">
<button class="cu-btn round bg-pink sm margin-left-sm" @tap.stop="onNavToLogin">立即授权绑定</button>
</view>
</view>
<view v-if="loginStatus" class="share-qrcode">
<view class="qrcode-box">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx"
icon="../../static/logo_icon.png" :iconSize="iconSize" :onval="true" :loadMake="loadMake"
:showLoading="true" @result="qrR" />
</view>
<view class="part-bottom">
<button class="btn cu-btn bg-white" @tap="onSaveImg">
<image src="../../static/icon_album.png" mode="widthFix"></image>
<text>保存到相册</text>
</button>
<button open-type="share" class="btn cu-btn bg-blue">
<image src="../../static/share_icon_2.png" mode="widthFix"></image>
<text>分享邀请</text>
</button>
</view>
</view>
<view class="tip-rule">
<view class="flex-col">
<text class="text-black text-lg text-bold">活动介绍：</text>
<view class="margin-top-sm padding-sm">
<text>
已授权并注册过的用户，可通过此页面的分享按钮进行分享小程序，或页面内提供的二维码让新用户扫码，授权并注册成功后，分享该小程序的用户即可获得1小时时长，可在房间下单时进行抵扣；
</text>
</view>
</view>
</view>
<LoginPop ref="loginPop" @success="onSuccess" />
</view>
</template>
<script>
import LoginPop from "@/components/login/login"
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
import config from "@/config/index.config";
import {
getUserInfo
} from "@/api/index.js"
export default {
components: {
LoginPop,
tkiQrcode
},
data() {
return {
cid: "qrCode",
qrPath: '',
text: '生成中',
size: 520,
iconSize: 52,
colorDark: '#000000',
loadMake: false,
qrPath: '',
assetsPath: config.assetsPath,
loginStatus: uni.getStorageSync('loginStatus') == 'login' ? true : false,
userInfo: '',
userName: ''
};
},
onLoad(query) {
if (query.q) {
const q = decodeURIComponent(query.q)
// let q = 'https://www.coujio.com/userShare?uid=8&act=0'
let d = q.split('?')
let c = d[1].split('&')
let obj = {};
c.forEach(item => {
let l = item.split('=');
obj[l[0]] = l[1];
})
if (obj.uid) {
uni.setStorageSync("shareUserId", obj.uid)
}
}
if (query.uid) {
uni.setStorageSync("shareUserId", query.uid)
}
if (this.loginStatus) {
this.onGetUserInfo();
}
},
onShareAppMessage() {
return {
title: "邀请扫码注册",
path: `/pages/userShare/userShare?uid=${this.userInfo.id}`,
imageUrl: this.qrPath
}
},
methods: {
onGetUserInfo() {
getUserInfo().then(res => {
if (res.data.code == 200) {
this.userInfo = {
...res.data.data,
consumerWallet: res.data.data.consumerWallet ? res.data.data.consumerWallet : {
remainingIntegral: 0
}
}
if (this.userInfo && this.userInfo.phone) {
this.userName = this.userInfo.phone.slice(-4);
}
this.text = `https://www.coujio.com/userShare?uid=${this.userInfo.id}&act=0`;
this.loadMake = true;
}
})
},
onSaveImg() {
uni.saveImageToPhotosAlbum({
filePath: this.qrPath,
success: () => {
uni.showToast({
icon: 'none',
title: '保存成功'
})
},
fail: (err) => {
console.log(err, 999)
}
})
},
qrR(r) {
console.log(r, "二维码路径")
this.qrPath = r;
},
onNavToLogin() {
this.$refs.loginPop.open();
},
onSuccess(){
uni.showToast({
icon:"none",
title:"授权登录成功"
})
this.loginStatus = uni.getStorageSync('loginStatus') == 'login' ? true : false;
this.onGetUserInfo();
}
}
}
</script>
<style lang="scss" scoped>
.user-share {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
background: linear-gradient(140deg, rgba(228, 5, 131, 0.16) 0%, #f1f1f1 32%, #f1f1f1 72%, rgba(228, 5, 131, 0.16) 100%);
}
.tip-rule {
display: flex;
flex: 1;
padding: 20upx 30upx;
.flex-col {
align-self: flex-end;
margin-bottom: 24upx;
}
}
.header-part {
width: 100%;
.flex-between {
display: flex;
justify-content: center;
padding: 30upx;
align-items: center;
}
.user-info {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 12upx;
}
.avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 6upx #ff00ff;
margin-right: 12upx;
}
}
.qrcode-box {
width: 580upx;
background-color: #ffffff;
border-radius: 12upx;
box-shadow: 0 0 12upx #ff00ff;
padding: 20upx;
margin-top: 24upx;
}
.share-qrcode {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.part-bottom {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 24upx;
width: 100%;
.btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
height: 88upx;
border-radius: 20upx;
margin: 0 20upx;
image {
display: block;
width: 46upx;
height: auto;
margin-right: 6upx;
}
text {
font-size: 26*1.2upx;
}
}
}
}
.logo-box {
display: flex;
justify-content: center;
align-items: center;
padding: 20upx 0;
}
</style>
\ No newline at end of file
pages/vipCreate/vipCreate.vue
......@@ -7,7 +7,7 @@
<view class="img-box">
<image :src="assetsPath+'/vip/bg_header_02_v1.png'" mode="scaleToFill"></image>
</view>
<view class="content">
<view class="bg-box-1">
<view class="bg-box-2">
......@@ -20,14 +20,14 @@
<text>会员超值购</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="flex-between action-box-list">
<view class="part part-left" @tap="onTabChange(1)">
<image v-if="tabIndex ==1" :src="assetsPath+'/vip/btn_2_a_v1.png'" class="active"
......@@ -35,22 +35,23 @@
<image v-else :src="assetsPath+'/vip/btn_2_v1.png'" class="unactive" mode="widthFix">
</image>
</view>
<view class="part part-right" @tap="onTabChange(2)">
<image v-if="tabIndex ==2" :src="assetsPath+'/vip/btn_1_a_v1.png'" class="active"
<image v-if="tabIndex ==2" :src="assetsPath+'/vip/btn_1_a.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_1_v1.png'" class="unactive" mode="widthFix">
<image v-else :src="assetsPath+'/vip/btn_1.png'" class="unactive" mode="widthFix">
</image>
</view>
</view>
<view v-if="tabIndex ==1" class="list-box">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item"
:class="rechargeIndex === k?'active':''" @tap="onRechargeChange(k)">
<image v-if="rechargeIndex === k" class="amount-bg" :src="assetsPath+'/vip/cz_bg_a.png'"
mode="widthFix"></image>
<image v-else class="amount-bg" :src="assetsPath+'/vip/cz_bg.png'" mode="widthFix"></image>
<image v-else class="amount-bg" :src="assetsPath+'/vip/cz_bg.png'" mode="widthFix">
</image>
<view class="absolute absolute-1">
<!-- <text>特惠充值</text> -->
<view v-if="item.giveType.includes('1')" class="preferential">
......@@ -60,7 +61,7 @@
<text>送{{item.giveDuration}}小时</text>
</view>
</view>
<view class="absolute absolute-2">
<image :src="assetsPath+'/vip/pre_icon.png'" mode="widthFix"></image>
</view>
......@@ -77,17 +78,21 @@
</view>
</view>
</view>
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view v-if="consumerMemberStatus" class="flex-row part-1">
<view class="text-bg-1">
<text>专属</text>
<view v-if="consumerMemberStatus" class="flex-between part-1">
<view class="flex-row-center">
<view class="text-bg-1">
<text>专属</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">（权益会员独享）</text>
</view>
<view class="" @tap="onShareByQrcode">
<text class="text-red sm">分享得返利</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">（权益会员独享）</text>
</view>
</view>
<view v-else class="flex-row part-1">
<view class="text-bg-1">
<text>特惠</text>
......@@ -97,7 +102,7 @@
</view>
<view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<!-- <view v-if="consumerMemberStatus" class="absolute">
<view class="flex-5">
<view class="flex-row">
......@@ -113,7 +118,7 @@
</view>
</view>
</view> -->
<view class="absolute">
<view class="flex-5">
<view class="flex-row">
......@@ -123,7 +128,7 @@
<text class="text-3">有效期：领取后1年内有效</text>
</view>
<view class="flex-3">
<!-- <view class="flex-row">
<view class="flex-row">
<text class="text-1">￥</text>
<text
class="text-2">{{equityAmountList.length? equityAmountList[0]:'99'}}.</text>
......@@ -131,13 +136,14 @@
class="text-3">{{equityAmountList.length? equityAmountList[1]:'00'}}</text>
</view>
<view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn bg-pink"> {{consumerMemberStatus? '权益续期':'立即开通'}}</button>
</view> -->
<view class="flex-col">
<button class="cu-btn bg-pink">
{{consumerMemberStatus? '权益续期':'立即开通'}}</button>
</view>
<!-- <view class="flex-col">
<text class="text-2">暂未上线</text>
<text class="text-2">敬请期待</text>
</view>
</view> -->
</view>
</view>
</view>
......@@ -152,35 +158,35 @@
</view>
</view>
</view>
<!-- <view class="active-bg">
<!-- <view class="active-bg">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
</view>
<view class="active-bg-2">
<image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view> -->
<view v-if="tabIndex ==1" class="flex-col">
<button class="cu-btn confirm-btn" @tap="onNavToRecharge">
<text>立即充值</text>
</button>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked"
style="transform: scale(0.6);"></checkbox>
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view>
<view class="active-bg">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
</view>
<view class="active-bg-2">
<image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view>
<view v-if="tabIndex ==1" class="active-bg">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
</view>
<view v-if="tabIndex ==1" class="active-bg-2">
<image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view>
<view v-if="tabIndex ==2" class="bg-box-1 margin-top">
<view class="bg-box-2">
<view class="flex-row-center title-content">
......@@ -192,14 +198,14 @@
<text>权益会员专属活动</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="prefer-box-list">
<view v-for="(item,k) in preferList" :key="k" class="list-item">
<image class="img" :src="item.iconUrl" mode="widthFix"></image>
......@@ -207,14 +213,14 @@
<text class="text-slogan">{{item.slogan}}</text>
</view>
</view>
<view class="look-prefer-nav" @tap="onNavToRule3">
<text class="text-title">点击可查看权益详情</text>
<image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
</view>
</view>
<view class="adorn-1">
<image class="img" :src="assetsPath+'/vip/adorn_1.png'" mode="widthFix"></image>
</view>
......@@ -347,11 +353,49 @@
</view>
</uni-popup>
<uni-popup ref="popupShare" type="center">
<view class="popup-box-content popup-box-share">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon"></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">分享邀请</text>
</view>
<view class="flex-col popup-content">
<view class="share-qrcode">
<view class="qrcode-box">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx"
icon="../../static/logo_icon.png" :iconSize="iconSize" :onval="true" :loadMake="loadMake"
:showLoading="true" @result="qrR" />
</view>
<view class="part-bottom">
<button class="btn cu-btn bg-white" @tap="onSaveImg">
<image src="../../static/icon_album.png" mode="widthFix"></image>
<text>保存到相册</text>
</button>
<button open-type="share" class="btn cu-btn bg-blue">
<image src="../../static/share_icon_2.png" mode="widthFix"></image>
<text>分享邀请</text>
</button>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<f-tabbar></f-tabbar>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
import moment from "@/common/moment.js";
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {
......@@ -376,6 +420,14 @@
},
data() {
return {
cid: "qrCode2",
qrPath: '',
text: '生成中',
size: 520,
iconSize: 52,
colorDark: '#000000',
loadMake: false,
qrPath: '',
checked: false,
assetsPath: config.assetsPath,
list: [],
......@@ -440,11 +492,40 @@
]
};
},
onLoad() {
onLoad(query) {
console.log(query,"页面传递过来的参数")
if (query.q) {
const q = decodeURIComponent(query.q)
let d = q.split('?')
let c = d[1].split('&')
let obj = {};
c.forEach(item => {
let l = item.split('=');
obj[l[0]] = l[1];
})
console.log(obj,"参数对象")
if (obj.uid) {
uni.setStorageSync("shareUserId", obj.uid)
this.tabIndex = 2
this.onLoading()
}
}
if (query.uid) {
uni.setStorageSync("shareUserId", query.uid)
this.tabIndex = 2
this.onLoading()
}
uni.hideTabBar();
this.onGetRechargeConf();
this.onLoading();
},
onShareAppMessage() {
return {
title: "邀新注册并购买得返利",
path: `/pages/vipCreate/vipCreate?uid=${this.userInfo.id}`
}
},
methods: {
onConfirmPay() {
if (this.tabIndex == 1) {
......@@ -456,6 +537,7 @@
onClose() {
this.$refs.popup.close()
this.$refs.popupPay.close()
this.$refs.popupShare.close()
},
onGetPhoneNumber(e) {
if (e.detail.errMsg !== "getPhoneNumber:ok") return;
......@@ -534,7 +616,6 @@
})
},
onTabChange(val) {
return;
if (this.tabIndex == val) return;
this.tabIndex = val;
this.checked = false;
......@@ -682,6 +763,30 @@
})
}
})
},
qrR(r) {
console.log(r, "二维码路径")
this.qrPath = r;
},
onShareByQrcode(){
this.text = `https://www.coujio.com/vipShare?uid=${this.userInfo.id}&act=0`;
console.log(this.text,"text")
this.loadMake = true;
this.$refs.popupShare.open()
},
onSaveImg() {
uni.saveImageToPhotosAlbum({
filePath: this.qrPath,
success: () => {
uni.showToast({
icon: 'none',
title: '保存成功'
})
},
fail: (err) => {
console.log(err, 999)
}
})
}
}
}
......@@ -697,23 +802,27 @@
.bg-header {
display: block;
width: 100vw;
image {
display: block;
width: 100%;
min-height: 400upx;
}
}
.content-box{
.content-box {
position: relative;
display: flex;
flex: 1;
width: 100vw;
.img-box{
.img-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
......@@ -729,7 +838,8 @@
// background-color: #FFEABF;
align-items: center;
padding: 0 0 60upx;
z-index: 8;
z-index: 8;
.bg-box-1 {
position: relative;
display: flex;
......@@ -890,14 +1000,17 @@
color: #FFFFFF;
}
}
.absolute-2{
.absolute-2 {
top: -16upx;
left: auto;
right: -16upx;
width: 64upx;
z-index: 8;
image{
image {
width: 100%;
max-height: 48upx;
}
}
......@@ -945,7 +1058,8 @@
justify-content: center;
align-items: center;
color: #FE3F00;
height: 61%;
height: 61%;
.symbol {
font-weight: 400;
font-size: 29upx;
......@@ -970,6 +1084,7 @@
justify-content: center;
align-items: center;
width: 100%;
text {
font-weight: bolder;
font-size: 28upx;
......@@ -988,19 +1103,22 @@
color: #FA5A20;
}
}
.amount{
.symbol{
.amount {
.symbol {
color: #FFFFFF;
}
.num{
.num {
color: #FFFFFF;
background: #FFFFFF;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.tip-text{
text{
.tip-text {
text {
color: #FFFFFF;
}
}
......@@ -1016,7 +1134,9 @@
align-items: center;
width: 90%;
margin-top: 24upx;
.part-2{
align-items: center;
}
.text-bg-1 {
display: flex;
justify-content: center;
......@@ -1257,7 +1377,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin-top: 24upx;
margin: 24upx 0;
.text-title {
font-weight: normal;
......@@ -1497,20 +1617,76 @@
}
}
}
.active-bg{
.active-bg {
width: 692upx;
margin: 20upx auto 0;
image{
image {
width: 100%;
max-height: 142upx;
}
}
.active-bg-2{
.active-bg-2 {
width: 692upx;
margin: 20upx auto 0;
image{
image {
width: 100%;
max-height: 218upx;
}
}
.popup-box-share{
width: 90vw;
border-radius: 12upx;
overflow: hidden;
.popup-box-2{
background: #f1f1f1;
}
.share-qrcode {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.qrcode-box {
background-color: #ffffff;
border-radius: 12upx;
box-shadow: 0 0 12upx #ff00ff;
padding: 20upx;
margin-top: 24upx;
}
.part-bottom {
display: flex;
flex-direction: row;
justify-content: center;
margin: 36upx 0;
width: 100%;
.btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
height: 88upx;
border-radius: 20upx;
margin: 0 20upx;
image {
display: block;
width: 32upx;
height: auto;
margin-right: 6upx;
}
text {
font-size: 24upx;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment