feat: 推广员海报生成

pull/2/head
TianYu 2023-05-18 14:56:38 +08:00
parent a0c0fc8437
commit 6ff2f26c2c
15 changed files with 1513 additions and 1565 deletions

View File

@ -59,6 +59,7 @@
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
"min-dash": "3.5.2", "min-dash": "3.5.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"qrcode": "^1.5.3",
"qrcode.vue": "^1.7.0", "qrcode.vue": "^1.7.0",
"quill": "1.3.7", "quill": "1.3.7",
"screenfull": "5.0.2", "screenfull": "5.0.2",

View File

@ -8,7 +8,6 @@ export function createPromoter(data) {
data: data data: data
}) })
} }
// 更新推广员 // 更新推广员
export function updatePromoter(data) { export function updatePromoter(data) {
return request({ return request({
@ -18,6 +17,14 @@ export function updatePromoter(data) {
}) })
} }
export function updatePassword(data) {
return request({
url: 'member/user/update-password',
method: 'post',
data: data
})
}
// 删除推广员 // 删除推广员
export function deletePromoter(id) { export function deletePromoter(id) {
return request({ return request({

View File

@ -4,7 +4,7 @@
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
<el-form-item label="所属组织" prop="orgId"> <el-form-item label="所属组织" prop="orgId">
<treeselect style="width: 240px;" v-model="queryParams.orgId" :options="deptOptions" :show-count="true" <treeselect style="width: 240px;" v-model="queryParams.deptId" :options="deptOptions" :show-count="true"
:clearable="false" :clearable="false"
placeholder="请选择所属组织" :normalizer="normalizer"/> placeholder="请选择所属组织" :normalizer="normalizer"/>
</el-form-item> </el-form-item>
@ -62,7 +62,7 @@
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['member:promoter:update']">修改 v-hasPermi="['member:promoter:update']">修改
</el-button> </el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdatePassword(scope.row)" <el-button size="mini" type="text" icon="el-icon-key" @click="handleUpdatePassword(scope.row)"
v-hasPermi="['member:promoter:delete']">修改密码 v-hasPermi="['member:promoter:delete']">修改密码
</el-button> </el-button>
</template> </template>
@ -76,7 +76,7 @@
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="所属组织" prop="orgId"> <el-form-item label="所属组织" prop="orgId">
<treeselect style="width: 240px;" v-model="form.orgId" :options="deptOptions" :show-count="true" <treeselect style="width: 240px;" v-model="form.deptId" :options="deptOptions" :show-count="true"
:clearable="false" :clearable="false"
placeholder="请选择所属组织" :normalizer="normalizer"/> placeholder="请选择所属组织" :normalizer="normalizer"/>
</el-form-item> </el-form-item>
@ -95,7 +95,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm" :loading="submitLoading" :disabled="submitLoading"> </el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -117,22 +117,22 @@
</div> </div>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button> <el-button type="primary" @click="submitFileForm" :loading="submitLoading" :disabled="submitLoading"> </el-button>
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 修改密码 --> <!-- 修改密码 -->
<el-dialog title="修改密码" :visible.sync="updatePassword.show" width="500px" append-to-body> <el-dialog title="修改密码" :visible.sync="updatePassword.show" width="500px" append-to-body>
<el-form ref="form" :model="updatePasswordForm" :rules="passwrodRules" label-width="80px"> <el-form ref="updatePasswordForm" :model="updatePasswordForm" :rules="passwrodRules" label-width="80px">
<el-form-item label="密码" prop="title"> <el-form-item label="密码" prop="password">
<el-input v-model="form.title" placeholder="请输入"/> <el-input type="password" v-model="updatePasswordForm.password" placeholder="请输入"/>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="picUrl"> <el-form-item label="确认密码" prop="checkPass">
<el-input v-model="form.title" placeholder="请输入"/> <el-input type="password" v-model="updatePasswordForm.checkPass" placeholder="请输入"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitPasswordForm" :loading="submitLoading" :disabled="submitLoading"> </el-button>
<el-button @click="updatePassword.show = false"> </el-button> <el-button @click="updatePassword.show = false"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -147,7 +147,7 @@ import {
getPromoter, getPromoter,
getPromoterPage, getPromoterPage,
importTemplate, importTemplate,
exportPromoterExcel exportPromoterExcel, updatePassword
} from '@/api/member/promoter'; } from '@/api/member/promoter';
import { import {
changeUserStatus changeUserStatus
@ -173,9 +173,29 @@ export default {
Treeselect Treeselect
}, },
data() { data() {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.updatePasswordForm.checkPass !== '') {
this.$refs.updatePasswordForm.validateField('checkPass');
}
callback();
}
};
const validateCheckPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.updatePasswordForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return { return {
// //
loading: true, loading: true,
submitLoading: false,
deptOptions: undefined, deptOptions: undefined,
// //
exportLoading: false, exportLoading: false,
@ -208,6 +228,16 @@ export default {
show: false, show: false,
userId: '' userId: ''
}, },
passwrodRules:{
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{ validator: validateCheckPass, trigger: 'blur' }
],
},
updatePasswordForm: {}, updatePasswordForm: {},
// //
queryParams: { queryParams: {
@ -337,19 +367,40 @@ export default {
this.open = true; this.open = true;
this.title = '修改推广员'; this.title = '修改推广员';
}, },
submitPasswordForm(){
this.$refs['updatePasswordForm'].validate(valid => {
if (!valid) {
return;
}
this.submitLoading = true
//
updatePassword({
id: this.updatePassword.userId,
password: this.updatePasswordForm.password
}).then(response => {
this.$modal.msgSuccess('修改成功');
this.updatePassword.show = false;
}).finally(()=>{
this.submitLoading = false
})
});
},
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs['form'].validate(valid => { this.$refs['form'].validate(valid => {
if (!valid) { if (!valid) {
return; return;
} }
this.submitLoading = true
// //
if (this.form.id != null) { if (this.form.id != null) {
updatePromoter(this.form).then(response => { updatePromoter(this.form).then(response => {
this.$modal.msgSuccess('修改成功'); this.$modal.msgSuccess('修改成功');
this.open = false; this.open = false;
this.getList(); this.getList();
}); }).finally(()=>{
this.submitLoading = false
})
return; return;
} }
// //
@ -357,7 +408,9 @@ export default {
this.$modal.msgSuccess('新增成功'); this.$modal.msgSuccess('新增成功');
this.open = false; this.open = false;
this.getList(); this.getList();
}); }).finally(()=>{
this.submitLoading = false
})
}); });
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */

View File

@ -39,7 +39,11 @@
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" /> <el-table-column label="编号" align="center" prop="id" />
<el-table-column label="用户昵称" align="center" prop="nickname" /> <el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="头像" align="center" prop="avatar" /> <el-table-column label="头像" align="center" prop="avatar">
<template v-slot="scope">
<img v-if="scope.row.avatar" :src="scope.row.avatar" width="50" height="50" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" > <el-table-column label="状态" align="center" prop="status" >
<template v-slot="scope"> <template v-slot="scope">
<span v-if="scope.row.status=='0'"></span> <span v-if="scope.row.status=='0'"></span>

View File

@ -76,18 +76,32 @@
<el-button size="mini" type="text" @click="handleUpdate(scope.row)" <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
v-hasPermi="['system:tenant:update']">编辑 v-hasPermi="['system:tenant:update']">编辑
</el-button> </el-button>
<el-button size="mini" type="text" @click="handleDelete(scope.row)" <el-popover
v-hasPermi="['system:tenant:delete']">禁用 placement="bottom-start"
</el-button> title="推广码"
<el-button size="mini" type="text" @click="handleCommission(scope.row)" width="200"
v-hasPermi="['system:tenant:delete']">提成设置 trigger="click"
</el-button> popper-class="qrcode-wrap"
<el-button size="mini" type="text" @click="handleNotice(scope.row)" >
v-hasPermi="['system:tenant:delete']">通知公告 <canvas :id="`id-${scope.row.id}`"></canvas>
</el-button> <el-button slot="reference" size="mini" type="text" @click="handleQRCode(scope.row)"
<el-button size="mini" type="text" @click="handleBanner(scope.row)" v-hasPermi="['system:tenant:delete']">推广码
v-hasPermi="['system:tenant:delete']">轮播图 </el-button>
</el-button> </el-popover>
<el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)"
v-hasPermi="['system:user:delete', 'system:user:update-password', 'system:permission:assign-user-role']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDisabled" size="mini" type="text" icon="el-icon-video-pause"
v-hasPermi="['system:tenant:delete']">禁用</el-dropdown-item>
<el-dropdown-item command="handleCommission" size="mini" type="text" icon="el-icon-set-up"
v-hasPermi="['system:tenant:delete']">提成设置</el-dropdown-item>
<el-dropdown-item command="handleNotice" size="mini" type="text" icon="el-icon-chat-round"
v-hasPermi="['system:tenant:delete']">通知公告</el-dropdown-item>
<el-dropdown-item command="handleBanner" size="mini" type="text" icon="el-icon-picture-outline"
v-hasPermi="['system:tenant:delete']">轮播图</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -190,6 +204,7 @@ import {
getTenantPage, getTenantPage,
exportTenantExcel exportTenantExcel
} from '@/api/system/tenant'; } from '@/api/system/tenant';
import QRCode from 'qrcode'
import {CommonStatusEnum} from '@/utils/constants' import {CommonStatusEnum} from '@/utils/constants'
import {getTenantPackageList} from '@/api/system/tenantPackage'; import {getTenantPackageList} from '@/api/system/tenantPackage';
import ImageUpload from '@/components/ImageUpload/index.vue'; import ImageUpload from '@/components/ImageUpload/index.vue';
@ -271,7 +286,7 @@ export default {
required: true, required: true,
message: '店铺负责人号码不能为空', message: '店铺负责人号码不能为空',
trigger: 'blur' trigger: 'blur'
},{ }, {
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/, pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
message: '请输入正确的手机号码', message: '请输入正确的手机号码',
trigger: 'blur' trigger: 'blur'
@ -290,7 +305,7 @@ export default {
required: true, required: true,
message: '服务电话不能为空', message: '服务电话不能为空',
trigger: 'blur' trigger: 'blur'
},{ }, {
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/, pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
message: '请输入正确的手机或座机号码', message: '请输入正确的手机或座机号码',
trigger: 'blur' trigger: 'blur'
@ -306,6 +321,9 @@ export default {
}) })
}, },
methods: { methods: {
handleCommand(command, index, row) {
this[command](row)
},
/** 查询列表 */ /** 查询列表 */
getList() { getList() {
this.loading = true; this.loading = true;
@ -326,6 +344,12 @@ export default {
this.form = {} this.form = {}
this.resetForm('form'); this.resetForm('form');
}, },
handleQRCode(row) {
QRCode.toCanvas(document.getElementById(`id-${row.id}`), `http://192.168.1.149:8080?tenantId=${row.id}`, function (error) {
if (error) console.error(error)
console.log('success!');
})
},
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNo = 1; this.queryParams.pageNo = 1;
@ -401,7 +425,7 @@ export default {
}); });
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDisabled(row) {
const id = row.id; const id = row.id;
this.$modal.confirm('是否确认删除店铺编号为"' + id + '"的数据项?').then(function () { this.$modal.confirm('是否确认删除店铺编号为"' + id + '"的数据项?').then(function () {
return deleteTenant(id); return deleteTenant(id);
@ -430,7 +454,13 @@ export default {
} }
}; };
</script> </script>
<style lang="scss">
.qrcode-wrap {
text-align: center;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.upload-image { .upload-image {
:deep(.el-upload--picture-card) { :deep(.el-upload--picture-card) {
width: 80px; width: 80px;
@ -443,4 +473,7 @@ export default {
height: 80px; height: 80px;
} }
} }
.el-popover__reference-wrapper .el-button{
margin-left: 10px;
}
</style> </style>

File diff suppressed because it is too large Load Diff

View File

@ -162,6 +162,9 @@
if (this.$store.getters.isLogin && !this.$Cache.get('USER_INFO')) { if (this.$store.getters.isLogin && !this.$Cache.get('USER_INFO')) {
await this.$store.dispatch('USERINFO'); await this.$store.dispatch('USERINFO');
} }
if(!this.$Cache.get('TENANT_ID') || this.$route.query.tenantId){
this.getTenantId()
}
setInterval(() => { setInterval(() => {
if (this.$store.getters.isLogin) { if (this.$store.getters.isLogin) {
this.setRefreshToken() this.setRefreshToken()
@ -169,6 +172,16 @@
}, 60000) }, 60000)
}, },
methods: { methods: {
getTenantId() {
const tenantId = this.$route.query.tenantId
if (tenantId) {
this.$store.commit("SET_TENANTID", tenantId);
} else {
this.$util.Tips({
title: '非法链接访问'
});
}
},
setRefreshToken() { setRefreshToken() {
refreshToken(this.$Cache.get("REFRESH_TOKEN")) refreshToken(this.$Cache.get("REFRESH_TOKEN"))
.then(res => { .then(res => {

View File

@ -152,7 +152,7 @@ export function getIntegralList(q) {
* *
*/ */
export function spreadBanner(data){ export function spreadBanner(data){
return request.get('user/spread/banner',data); return request.get('member/user/spread/banner',data);
} }
/** /**

View File

@ -1,12 +1,12 @@
let domain = 'http://192.168.1.188:48080' let domain = 'http://192.168.1.147:48080'
module.exports = { module.exports = {
// 请求域名 格式: https://您的域名 // 请求域名 格式: https://您的域名
// #ifdef MP // #ifdef MP
HTTP_REQUEST_URL: domain, HTTP_REQUEST_URL: domain,
// #endif // #endif
HTTP_ADMIN_URL:'http://192.168.1.188:48080', //PC后台的API请求地址上传图片用 HTTP_ADMIN_URL:'http://192.168.1.147:48080', //PC后台的API请求地址上传图片用
// #ifdef H5 // #ifdef H5
//H5接口是浏览器地址 //H5接口是浏览器地址
// HTTP_REQUEST_URL: window.location.protocol+"//"+window.location.host, // HTTP_REQUEST_URL: window.location.protocol+"//"+window.location.host,

View File

@ -4,6 +4,8 @@ module.exports = {
REFRESH_TOKEN: 'REFRESH_TOKEN', REFRESH_TOKEN: 'REFRESH_TOKEN',
// uid // uid
UID:'UID', UID:'UID',
// 租户ID
TENANT_ID: 'TENANT_ID',
//用户信息 //用户信息
USER_INFO: 'USER_INFO', USER_INFO: 'USER_INFO',
//token 过期时间 //token 过期时间
@ -32,4 +34,4 @@ module.exports = {
CACHE_LATITUDE: 'LATITUDE', CACHE_LATITUDE: 'LATITUDE',
//app手机信息 //app手机信息
PLATFORM: 'systemPlatform' PLATFORM: 'systemPlatform'
} }

View File

@ -96,7 +96,9 @@
<image :src="item.pic"></image> <image :src="item.pic"></image>
<text>{{item.name}}</text> <text>{{item.name}}</text>
</navigator> --> </navigator> -->
<navigator class="item" :url="item.url" hover-class="none"> <navigator class="item" :url="item.url" hover-class="none"
v-if="!(item.url =='/pages/users/user_spread_user/index' && userInfo.userType !== 'PROMOTER')"
>
<image :src="item.pic"></image> <image :src="item.pic"></image>
<text>{{item.name}}</text> <text>{{item.name}}</text>
</navigator> </navigator>

View File

@ -1,425 +1,428 @@
<template> <template>
<view style="height: 100%;"> <view style="height: 100%;">
<view class='distribution-posters'> <view class='distribution-posters'>
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px"> :duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
<block v-for="(item,index) in spreadList" :key="index"> <block v-for="(item,index) in spreadList" :key="index">
<swiper-item> <swiper-item>
<image :src="item.pic" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" <image :src="item.pic" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'"
mode='aspectFill' /> mode='aspectFill' />
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
<!-- #ifdef MP --> <!-- #ifdef MP -->
<view class='keep bg-color' @click='savePosterPath'>保存海报</view> <view class='keep bg-color' @click='savePosterPath'>保存海报</view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP --> <!-- #ifndef MP -->
<div class="preserve acea-row row-center-wrapper"> <div class="preserve acea-row row-center-wrapper">
<div class="line"></div> <div class="line"></div>
<div class="tip">长按保存图片</div> <div class="tip">长按保存图片</div>
<div class="line"></div> <div class="line"></div>
</div> </div>
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- #ifdef MP --> <!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> --> <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif --> <!-- #endif -->
<view class="canvas" v-if="canvasStatus"> <view class="canvas" v-if="canvasStatus">
<canvas style="width:750px;height:1190px;" canvas-id="canvasOne"></canvas> <canvas style="width:750px;height:1190px;" canvas-id="canvasOne"></canvas>
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" /> <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
// #ifdef H5 // #ifdef H5
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js' import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
// #endif // #endif
import { import {
getUserInfo, getUserInfo,
spreadBanner spreadBanner
} from '@/api/user.js'; } from '@/api/user.js';
import { import {
toLogin toLogin
} from '@/libs/login.js'; } from '@/libs/login.js';
import { import {
mapGetters mapGetters
} from "vuex"; } from "vuex";
// #ifdef MP // #ifdef MP
import { import {
base64src base64src
} from '@/utils/base64src.js' } from '@/utils/base64src.js'
import authorize from '@/components/Authorize'; import authorize from '@/components/Authorize';
import { import {
getQrcode getQrcode
} from '@/api/api.js'; } from '@/api/api.js';
// #endif // #endif
import home from '@/components/home'; import home from '@/components/home';
import { import {
imageBase64 imageBase64
} from "@/api/public"; } from "@/api/public";
export default { export default {
components: { components: {
// #ifdef MP // #ifdef MP
authorize, authorize,
// #endif // #endif
home home
}, },
data() { data() {
return { return {
imgUrls: [], imgUrls: [],
indicatorDots: false, indicatorDots: false,
circular: false, circular: false,
autoplay: false, autoplay: false,
interval: 3000, interval: 3000,
duration: 500, duration: 500,
swiperIndex: 0, swiperIndex: 0,
spreadList: [], spreadList: [],
poster: '', poster: '',
isAuto: false, // isAuto: false, //
isShowAuth: false, // isShowAuth: false, //
qrcodeSize: 1000, qrcodeSize: 1000,
PromotionCode: '', PromotionCode: '',
base64List: [], base64List: [],
canvasStatus: true // canvasStatus: true //
}; };
}, },
computed: mapGetters(['isLogin', 'uid', 'userInfo']), computed: mapGetters(['isLogin', 'uid', 'userInfo']),
watch: { watch: {
isLogin: { isLogin: {
handler: function(newV, oldV) { handler: function(newV, oldV) {
if (newV) { if (newV) {
this.userSpreadBannerList(); this.userSpreadBannerList();
} }
}, },
deep: true deep: true
} }
}, },
onLoad() { onLoad() {
if (this.isLogin) { if (this.isLogin) {
this.userSpreadBannerList(); this.userSpreadBannerList();
} else { } else {
toLogin(); toLogin();
} }
}, },
/** /**
* 用户点击右上角分享 * 用户点击右上角分享
*/ */
// #ifdef MP // #ifdef MP
onShareAppMessage: function() { onShareAppMessage: function() {
return { return {
title: this.userInfo.nickname + '-分销海报', title: this.userInfo.nickname + '-分销海报',
imageUrl: this.spreadList[0].pic, imageUrl: this.spreadList[0].pic,
path: '/pages/index/index?spid=' + this.uid, path: '/pages/index/index?spid=' + this.uid,
}; };
}, },
// #endif // #endif
onReady() {}, onReady() {},
methods: { methods: {
userSpreadBannerList: function() { userSpreadBannerList: function() {
let that = this; let that = this;
uni.showLoading({ uni.showLoading({
title: '获取中', title: '获取中',
mask: true, mask: true,
}) })
spreadBanner({ spreadBanner({
page: 1, page: 1,
limit: 5 limit: 5
}).then(res => { }).then(res => {
uni.hideLoading(); uni.hideLoading();
that.$set(that, 'spreadList', res.data); const list = res.data.map((item) => item.pic)
that.getImageBase64(res.data); that.$set(that, 'spreadList', res.data);
}).catch(err => { that.$set(that, 'base64List', list);
uni.hideLoading(); that.make();
}); // that.getImageBase64(res.data);
}, }).catch(err => {
getImageBase64: function(images) { uni.hideLoading();
uni.showLoading({ });
title: '海报生成中', },
mask: true getImageBase64: function(images) {
}); uni.showLoading({
let that = this; title: '海报生成中',
// #ifdef H5 mask: true
let spreadList = [] });
// Promise let that = this;
images.forEach(item => { // #ifdef H5
const oneApi = imageBase64({ let spreadList = []
url: item.pic // Promise
}).then(res => { images.forEach(item => {
return res.data.code; const oneApi = imageBase64(item.pic).then(res => {
}) return res.data.code;
spreadList.push(oneApi) })
}) spreadList.push(oneApi)
Promise.all(spreadList).then(result => { })
that.$set(that, 'base64List', result); Promise.all(spreadList).then(result => {
that.make(); console.log('result', result)
that.setShareInfoStatus(); that.$set(that, 'base64List', result);
}) that.make();
// #endif that.setShareInfoStatus();
})
// #endif
// #ifdef MP // #ifdef MP
that.base64List = images.map(item => { that.base64List = images.map(item => {
return item.pic return item.pic
}); });
// #endif // #endif
// #ifdef MP // #ifdef MP
that.getQrcode(); that.getQrcode();
// #endif // #endif
}, },
// //
getQrcode() { getQrcode() {
let that = this; let that = this;
let data = { let data = {
pid: that.uid, pid: that.uid,
path: 'pages/index/index' path: 'pages/index/index'
} }
let arrImagesUrl = ""; let arrImagesUrl = "";
uni.downloadFile({ uni.downloadFile({
url: this.base64List[0], url: this.base64List[0],
success: (res) => { success: (res) => {
arrImagesUrl = res.tempFilePath; arrImagesUrl = res.tempFilePath;
} }
}); });
getQrcode(data).then(res => { getQrcode(data).then(res => {
base64src(res.data.code, res => { base64src(res.data.code, res => {
that.PromotionCode = res; that.PromotionCode = res;
}); });
setTimeout(() => { setTimeout(() => {
that.PosterCanvas(arrImagesUrl, that.PromotionCode, that.userInfo.nickname, 0); that.PosterCanvas(arrImagesUrl, that.PromotionCode, that.userInfo.nickname, 0);
}, 300); }, 300);
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
that.$util.Tips({ that.$util.Tips({
title: err title: err
}); });
that.$set(that, 'canvasStatus', false); that.$set(that, 'canvasStatus', false);
}); });
}, },
// //
make() { make() {
let that = this; let that = this;
let href = ''; let href = '';
// #ifdef H5 // #ifdef H5
href = window.location.href.split('/pages')[0]; href = window.location.href.split('/pages')[0];
// #endif // #endif
uQRCode.make({ uQRCode.make({
canvasId: 'qrcode', canvasId: 'qrcode',
text: href + '/pages/index/index?spread=' + that.uid, text: href + '/pages/index/index?spread=' + that.uid,
size: this.qrcodeSize, size: this.qrcodeSize,
margin: 10, margin: 10,
success: res => { success: res => {
that.PromotionCode = res; that.PromotionCode = res;
setTimeout(() => { setTimeout(() => {
that.PosterCanvas(this.base64List[0], that.PromotionCode, that.userInfo that.PosterCanvas(this.base64List[0], that.PromotionCode, that.userInfo
.nickname, 0); .nickname, 0);
}, 300); }, 300);
}, },
complete: (res) => {}, complete: (res) => {},
fail: res => { fail: res => {
uni.hideLoading(); uni.hideLoading();
that.$util.Tips({ that.$util.Tips({
title: '海报二维码生成失败!' title: '海报二维码生成失败!'
}); });
} }
}) })
}, },
PosterCanvas: function(arrImages, code, nickname, index) { PosterCanvas: function(arrImages, code, nickname, index) {
let context = uni.createCanvasContext('canvasOne') let context = uni.createCanvasContext('canvasOne')
context.clearRect(0, 0, 0, 0); context.clearRect(0, 0, 0, 0);
let that = this; let that = this;
uni.getImageInfo({ console.log('arrImages', arrImages)
src: arrImages, uni.getImageInfo({
success: function(res) { src: arrImages,
context.drawImage(arrImages, 0, 0, 750, 1190); success: function(res) {
context.save(); context.drawImage(arrImages, 0, 0, 750, 1190);
context.drawImage(code, 110, 925, 140, 140); context.save();
context.restore(); context.drawImage(code, 110, 925, 140, 140);
context.setFontSize(28); context.restore();
context.fillText(nickname, 270, 980); context.setFontSize(28);
context.fillText('邀请您加入', 270, 1020); context.fillText(nickname, 270, 980);
setTimeout(() => { context.fillText('邀请您加入', 270, 1020);
context.draw(true, function() { setTimeout(() => {
uni.canvasToTempFilePath({ context.draw(true, function() {
destWidth: 750, uni.canvasToTempFilePath({
destHeight: 1190, destWidth: 750,
canvasId: 'canvasOne', destHeight: 1190,
fileType: 'jpg', canvasId: 'canvasOne',
success: function(res) { fileType: 'jpg',
// H5tempFilePath base64 success: function(res) {
uni.hideLoading(); // H5tempFilePath base64
that.spreadList[index].pic = res uni.hideLoading();
.tempFilePath; that.spreadList[index].pic = res
that.$set(that, 'poster', res .tempFilePath;
.tempFilePath); that.$set(that, 'poster', res
that.$set(that, 'canvasStatus', false); .tempFilePath);
} that.$set(that, 'canvasStatus', false);
}) }
}) })
}, 100); })
}, }, 100);
fail: function(err) { },
uni.hideLoading(); fail: function(err) {
that.$util.Tips({ uni.hideLoading();
title: '无法获取图片信息' that.$util.Tips({
}); title: '无法获取图片信息'
} });
}); }
}, });
},
onLoadFun: function(e) { onLoadFun: function(e) {
this.$set(this, 'userInfo', e); this.$set(this, 'userInfo', e);
this.userSpreadBannerList(); this.userSpreadBannerList();
}, },
// //
authColse: function(e) { authColse: function(e) {
this.isShowAuth = e this.isShowAuth = e
}, },
bindchange(e) { bindchange(e) {
let base64List = this.base64List; let base64List = this.base64List;
let index = e.detail.current; let index = e.detail.current;
this.swiperIndex = index; this.swiperIndex = index;
let arrImagesUrl = ""; let arrImagesUrl = "";
uni.downloadFile({ uni.downloadFile({
url: base64List[index], url: base64List[index],
success: (res) => { success: (res) => {
arrImagesUrl = res.tempFilePath; arrImagesUrl = res.tempFilePath;
setTimeout(() => { setTimeout(() => {
this.$set(this, 'canvasStatus', true); this.$set(this, 'canvasStatus', true);
this.PosterCanvas(arrImagesUrl, this.PromotionCode, this.userInfo.nickname, this.PosterCanvas(arrImagesUrl, this.PromotionCode, this.userInfo.nickname,
index); index);
}, 300); }, 300);
} }
}); });
}, },
// //
savePosterPath: function() { savePosterPath: function() {
let that = this; let that = this;
uni.getSetting({ uni.getSetting({
success(res) { success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) { if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({ uni.authorize({
scope: 'scope.writePhotosAlbum', scope: 'scope.writePhotosAlbum',
success() { success() {
uni.saveImageToPhotosAlbum({ uni.saveImageToPhotosAlbum({
filePath: that.poster, filePath: that.poster,
success: function(res) { success: function(res) {
that.$util.Tips({ that.$util.Tips({
title: '保存成功', title: '保存成功',
icon: 'success' icon: 'success'
}); });
}, },
fail: function(res) { fail: function(res) {
that.$util.Tips({ that.$util.Tips({
title: '保存失败' title: '保存失败'
}); });
} }
}); });
} }
}); });
} else { } else {
uni.saveImageToPhotosAlbum({ uni.saveImageToPhotosAlbum({
filePath: that.poster, filePath: that.poster,
success: function(res) { success: function(res) {
that.$util.Tips({ that.$util.Tips({
title: '保存成功', title: '保存成功',
icon: 'success' icon: 'success'
}); });
}, },
fail: function(res) { fail: function(res) {
that.$util.Tips({ that.$util.Tips({
title: '保存失败' title: '保存失败'
}); });
} }
}); });
} }
} }
}); });
}, },
setShareInfoStatus: function() { setShareInfoStatus: function() {
if (this.$wechat.isWeixin()) { if (this.$wechat.isWeixin()) {
let configAppMessage = { let configAppMessage = {
desc: '分销海报', desc: '分销海报',
title: this.userInfo.nickname + '-分销海报', title: this.userInfo.nickname + '-分销海报',
link: '/pages/index/index?spread=' + this.uid, link: '/pages/index/index?spread=' + this.uid,
imgUrl: this.spreadList[0].pic imgUrl: this.spreadList[0].pic
}; };
this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"], this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
configAppMessage) configAppMessage)
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { page {
background-color: #a3a3a3 !important; background-color: #a3a3a3 !important;
height: 100% !important; height: 100% !important;
} }
.canvas { .canvas {
position: relative; position: relative;
} }
.distribution-posters { .distribution-posters {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.distribution-posters swiper { .distribution-posters swiper {
width: 100%; width: 100%;
height: 1000rpx; height: 1000rpx;
position: relative; position: relative;
margin-top: 40rpx; margin-top: 40rpx;
} }
.distribution-posters .slide-image { .distribution-posters .slide-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
border-radius: 15rpx; border-radius: 15rpx;
} }
.distribution-posters .slide-image.active { .distribution-posters .slide-image.active {
transform: none; transform: none;
transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
} }
.distribution-posters .slide-image.quiet { .distribution-posters .slide-image.quiet {
transform: scale(0.8333333); transform: scale(0.8333333);
transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
} }
.distribution-posters .keep { .distribution-posters .keep {
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
width: 600rpx; width: 600rpx;
height: 80rpx; height: 80rpx;
border-radius: 50rpx; border-radius: 50rpx;
text-align: center; text-align: center;
line-height: 80rpx; line-height: 80rpx;
margin: 38rpx auto; margin: 38rpx auto;
} }
.distribution-posters .preserve { .distribution-posters .preserve {
color: #fff; color: #fff;
text-align: center; text-align: center;
margin-top: 38rpx; margin-top: 38rpx;
} }
.distribution-posters .preserve .line { .distribution-posters .preserve .line {
width: 100rpx; width: 100rpx;
height: 1px; height: 1px;
background-color: #fff; background-color: #fff;
} }
.distribution-posters .preserve .tip { .distribution-posters .preserve .tip {
margin: 0 30rpx; margin: 0 30rpx;
} }
</style> </style>

View File

@ -4,6 +4,7 @@ export default {
backgroundColor: state => state.app.backgroundColor, backgroundColor: state => state.app.backgroundColor,
userInfo: state => state.app.userInfo || {}, userInfo: state => state.app.userInfo || {},
uid: state => state.app.uid, uid: state => state.app.uid,
tenantId: state => state.app.tenantId,
homeActive: state => state.app.homeActive, homeActive: state => state.app.homeActive,
home: state => state.app.home, home: state => state.app.home,
chatUrl: state => state.app.chatUrl, chatUrl: state => state.app.chatUrl,

View File

@ -5,6 +5,7 @@ import {
LOGIN_STATUS, LOGIN_STATUS,
REFRESH_TOKEN, REFRESH_TOKEN,
UID, UID,
TENANT_ID,
PLATFORM PLATFORM
} from '../../config/cache'; } from '../../config/cache';
import Cache from '../../utils/cache'; import Cache from '../../utils/cache';
@ -18,6 +19,7 @@ const state = {
backgroundColor: "#fff", backgroundColor: "#fff",
userInfo: Cache.get(USER_INFO)?JSON.parse(Cache.get(USER_INFO)):null, userInfo: Cache.get(USER_INFO)?JSON.parse(Cache.get(USER_INFO)):null,
uid: Cache.get(UID) || null, uid: Cache.get(UID) || null,
tenantId: Cache.get(TENANT_ID) || '',
homeActive: false, homeActive: false,
chatUrl: Cache.get('chatUrl') || '', chatUrl: Cache.get('chatUrl') || '',
systemPlatform: Cache.get(PLATFORM)?Cache.get(PLATFORM):'', systemPlatform: Cache.get(PLATFORM)?Cache.get(PLATFORM):'',
@ -35,6 +37,10 @@ const mutations = {
state.uid = val; state.uid = val;
Cache.set(UID, val); Cache.set(UID, val);
}, },
SET_TENANTID(state,val){
state.tenantId = val;
Cache.set(TENANT_ID, val);
},
UPDATE_LOGIN(state, token) { UPDATE_LOGIN(state, token) {
state.token = token; state.token = token;
}, },

View File

@ -22,7 +22,7 @@ function baseRequest(url, method, data, {
// if (params != undefined) { // if (params != undefined) {
// header = HEADERPARAMS; // header = HEADERPARAMS;
// } // }
header['tenant-id'] = 1 header['tenant-id'] = store.state.app.tenantId
if (!noAuth) { if (!noAuth) {
//登录过期自动登录 //登录过期自动登录
if (!store.state.app.token && !checkLogin()) { if (!store.state.app.token && !checkLogin()) {