Skip to content

N
newLive
Commit fa4bf54b authored by jiaoyahui's avatar jiaoyahui
Browse files
Options

点击跳转到ios和安卓 以及上传图片

parent 6706a7b8
Hide whitespace changes
Inline Side-by-side
Showing with 1968 additions and 259 deletions
package-lock.json
View file @ fa4bf54b
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ fa4bf54b
......@@ -9,8 +9,10 @@
},
"dependencies": {
"@liveqing/liveplayer": "^2.7.0",
"ali-oss": "^6.17.1",
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-ui": "^2.15.12",
"jquery": "^3.6.1",
"js-md5": "^0.7.3",
"mint-ui": "^2.2.13",
......
src/axios/api.js
View file @ fa4bf54b
......@@ -84,8 +84,13 @@ live: {
userCenter:function(data){
return service.post('/douniu/userCenter', data)
},
sigurature:function(data){
return service.post('/upload/sigurature/'+11, data)
// 获取上传签名
getSigurature: function(data) {
return service.post('/upload/sigurature/11', data)
},
// 通过图片名称获取图片路径
getImgByName(data) {
return service.post("/upload/getUrl", data)
},
followAnchor:function(data){
return service.post('/app/live/followAnchor', data)
......@@ -96,6 +101,11 @@ live: {
getFollowAnchor:function(data){
return service.post('/app/live/getFollowAnchor', data)
},
getconfig:function(data){
return service.post('/wx/jssdk/config', data)
},
......
src/components/plugin/uploadAndDeleteOss.js 0 → 100644
View file @ fa4bf54b
// 引入依赖包
const OSS = require('ali-oss');
/*
上传方法
params:config,file
config:oss 相关配置参数
file: 上传的文件对象
*/
export function uploadImg(config, file) {
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: config.region,
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: config.osskeyId,
accessKeySecret: config.osskeySecret,
// 填写Bucket名称。
bucket: config.ossBucket,
endpoint:config.endpoint,
stsToken:config.stsToken
});
// 从输入框获取file对象，例如<input type="file" id="file" />。
// const data = document.getElementById('file').files[0];
// 创建并填写Blob数据。
//const data = new Blob('Hello OSS');
// 创建并填写OSS Buffer内容。
//const data = new OSS.Buffer('Hello OSS');
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如
//exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
const result = client.put(`/test/${new Date().getTime()+file.name}`, file.raw||file);
return result;
}
/*
删除OSS图片方法
params:config,objKey
config:oss 相关配置参数
ObjKey: 上传文件成功后，OSS返回的name 根据这个去删除
*/
export function delImg(config, objKey) {
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: config.region,
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: config.osskeyId,
accessKeySecret: config.osskeySecret,
// 填写Bucket名称。
bucket: config.ossBucket
});
const result = client.delete(objKey);
return result;
}
\ No newline at end of file
src/main.js
View file @ fa4bf54b
......@@ -11,12 +11,8 @@ import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import common from '../static/js/common.js' //公共方法
import 'video.js/dist/video-js.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueClipboard from "vue-clipboard2";
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
......@@ -35,6 +31,7 @@ Vue.prototype.axios = axios;
Vue.prototype.router = router;
Vue.prototype.$md5 = md5;
Vue.prototype.common = common; //引入公共方法
Vue.use(ElementUI);
new Vue({
render: h => h(App),
router,
......
src/views/mine/follow.vue
View file @ fa4bf54b
......@@ -14,8 +14,8 @@
</div>
<div class="J_go">
<img v-if='item.ifFllow==true' src="../../assets/vit.png" alt="" class="Img_s" @click="fotwo(index)" >
<img v-if='item.ifFllow==false' src="../../assets/follow.png" alt="" class="Img_s" @click="fo(index)" >
<img v-if='item.ifFllow==true' src="../../assets/vit.png" alt="" class="Img_s" @click="fotwo(index,item.udUbId)" >
<img v-if='item.ifFllow==false' src="../../assets/follow.png" alt="" class="Img_s" @click="fo(index,item.udUbId)" >
</div>
</div>
......@@ -42,14 +42,18 @@ export default {
},
methods: {
fotwo:function(e){
//已经关注
fotwo:function(e,udUbId){
this.udUbId=udUbId
this.List_p[e].ifFllow=false
this.isactiveTwo = false;
this.isactive = true;
this.followAnchor()
},
fo:function(e){
//关注
fo:function(e,udUbId){
this.udUbId=udUbId
this.List_p[e].ifFllow=true
this.isactiveTwo = true;
this.isactive = false;
......@@ -61,10 +65,10 @@ export default {
this.$router.push({name:'mine'})
},
followAnchor(){
this.lvrUbId=localStorage.getItem('lvrUbId');//直播id
console.log(this.lvrUbId,'-=----------------')
// this.lvrUbId=localStorage.getItem('lvrUbId');//直播id
// console.log(this.lvrUbId,'-=----------------')
let temp=this.qs.stringify({
lvrUbId:this.lvrUbId,
lvrUbId: this.udUbId,
type:1,
applicationType:4
})
......
src/views/mine/index.vue
View file @ fa4bf54b
......@@ -65,7 +65,7 @@
<div class="sent">
<div class="Ing_m">
<img src="../../assets/app.png" alt="">
<div>下载App ></div>
<div @click="openapp">下载App ></div>
</div>
</div>
......@@ -73,6 +73,7 @@
<div class="Ing_m">
<img src="../../assets/xcx.png" alt="">
<div>下载小程序 ></div>
</div>
</div>
......@@ -81,6 +82,7 @@
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
......@@ -92,7 +94,9 @@ export default {
avatar:''
}
},
created () { },
created () {
},
mounted () {
this.beforeCreate()
// 调用判断ios与安卓方法
......@@ -100,18 +104,70 @@ export default {
this.userCenter()
},
methods: {
// 判断是安卓还是ios
// appDown() {
// var u = navigator.userAgent;
// var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
// if(isiOS){
// this.isApple = true
// window.location.href="https://itunes.apple.com/cn/app/%E6%96%97%E7%89%9B%E8%B4%...8F/id1262900139?mt=8"
// }else if(isAndroid){
// this.isApple = false
// }
// },
openapp() {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
// alert("我是安卓");
this.android();
}
if (isIOS) {
// alert("我是苹果");
this.ios()
}
},
android() {
var _clickTime = new Date().getTime();
window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zfxf.douniu&fromcase=40003'; /***打开app的协议，有安卓同事提供***/
//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function () {
_count++;
var elsTime = new Date().getTime() - _clickTime;
if (_count >= 100 || elsTime > 5000) {
console.log(_count)
console.log(elsTime)
clearInterval(intHandle);
//检查app是否打开
if (document.hidden || document.webkitHidden) {
// 打开了
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.zfxf.douniu&fromcase=40003";
// alert('打开了');
window.close();
// return;
} else {
// 没打开
// alert('没打开');
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.zfxf.douniu&fromcase=40003";//下载链接
}
}
}, 20);
},
ios() {
//https://sj.qq.com/appdetail/com.zfxf.douniu
window.location.href = 'https://sj.qq.com/appdetail/com.zfxf.douniu';
},
handleLaunchFn:function(){
},
//获取签名那些
getconfig(){
let temp=this.qs.stringify({
})
this.server.live.getconfig(temp).then(res=>{
})
},
userCenter(){
let temp=this.qs.stringify({
......
src/views/mine/proposal.vue
View file @ fa4bf54b
......@@ -5,58 +5,34 @@
<div class="grup">
<img src="../../assets/fu.png" alt="" class="Lent">
<span>遇到问题了？点击拨打<a style="color:red">客服热线</a>为您解决</span>
<span>遇到问题了？点击拨打<a style="color:red" @click="callphone">客服热线</a>为您解决</span>
</div>
<div class="grup_p">您的问题或者建议</div>
<div class="plead">
<textarea cols="40" rows="20" placeholder="请填写你的遇到的问题或者功能建议，感谢支持(必填)请填写你的遇到的问题或者功能建议，感谢支持(必填"></textarea>
<textarea cols="40" v-model="test" rows="20" placeholder="请填写你的遇到的问题或者功能建议，感谢支持(必填)请填写你的遇到的问题或者功能建议，感谢支持(必填"></textarea>
</div>
<div class="In_img">图片（选填，提供问题截图）</div>
<div class="Pon">
<el-upload
id="upload"
action="#"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-camera-solid"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-upload
action=''
list-type="picture-card"
:data="uploadData"
:on-preview="handlePictureCardPreview"
:on-success="imgSuccess"
:on-error="imgError"
:on-remove="imgRemove"
:headers="headers"
:http-request="upload"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div class="line">联系方式</div>
<div class="ba_c">
<input type="number" placeholder="留下联系方式，更方便解决问题 ">
<input type="number" @input='limitPhone' maxlength="11" v-model="phone" placeholder="留下联系方式，更方便解决问题 ">
</div>
<div class="log_t">
......@@ -65,101 +41,165 @@
</div>
</template>
<script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
region: 'yourRegion',
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: res.data.data.assumeRoleResponse.accessKeyId,
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
// 填写Bucket名称。
bucket: 'examplebucket'
});
// 从输入框获取file对象，例如<input type="file" id="file" />。
let data;
// 创建并填写Blob数据。
//const data = new Blob(['Hello OSS']);
// 创建并填写OSS Buffer内容。
//const data = new OSS.Buffer(['Hello OSS']);
const upload = document.getElementById("upload");
const headers = {
// 指定该Object被下载时网页的缓存行为。
// 'Cache-Control': 'no-cache',
// 指定该Object被下载时的名称。
// 'Content-Disposition': 'oss_download.txt',
// 指定该Object被下载时的内容编码格式。
// 'Content-Encoding': 'UTF-8',
// 指定过期时间。
// 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT',
// 指定Object的存储类型。
// 'x-oss-storage-class': 'Standard',
// 指定Object的访问权限。
// 'x-oss-object-acl': 'private',
// 设置Object的标签，可同时设置多个标签。
// 'x-oss-tagging': 'Tag1=1&Tag2=2',
// 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
// 'x-oss-forbid-overwrite': 'true',
};
<script type="text/ecmascript-6">
async function putObject (data) {
try {
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
const result = await client.put(
"exampledir/exampleobject.txt",
data
//{headers}
);
console.log(result);
} catch (e) {
console.log(e);
}
}
import { uploadImg, delImg } from "../../components/plugin/uploadAndDeleteOss";
upload.addEventListener("click", () => {
data = document.getElementById("file").files[0];
putObject(data);
});
</script>
<script type="text/ecmascript-6">
export default {
data () {
return {
// action:'https://test6.douniu8.com/upload/sigurature/11',
uploadData:{
token:sessionStorage.getItem("token"),
},
headers:{
"Authorization": 'Bearer ' + sessionStorage.getItem("token")
},
test:'' ,
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
phone:'',
phoneText:'',
id: 'upload',
percentage: 0,
url:'',
urls:[],
getToken:{
sign:'',
},
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
region: 'oss-cn-hangzhou',
bucket: 'buket名称',
id: 'upload',
percentage: 0,
url:'',
urls:[],
getToken:{
sign:'',
}
options:{
inline:false,
}, // viewer 图片查看器配置
fileList: [], // 文件列表
limitCount: 5, // 最大上传数
hide: false, // 是否隐藏上传按钮
maxSize: 5 * 1024 * 1024, // 单张图片最大质量
ossConfig: {
stsToken:'',
region:"",
ossBucket: "",
osskeyId: "",
osskeySecret: "",
endpoint:'',
securityToken:'',
}, // oss配置参数
imgOssList:[], // 图片上传到OSS的路径集合
imgOssName:[], // 图片上传到OSS的名字集合 删除图片时用
fileNameList:[],// 图片在本地的名字集合
}
},
created () {
this.sigurature()
// this.doUpload()
// this.getImgMsg()
},
mounted () {
this.feedback()
this.sigurature()
this.beforeCreate()
},
methods: {
limitPhone(e) {
if (this.phone.length > 11) {
this.phone = this.phone.slice(0, 11);
}
},
callphone:function() {
window.location.href = 'tel://'+this.phone
},
// 自定义上传图片
async upload(file) {
try {
// 上传图片成功返回值
let imgObj = await uploadImg(this.ossConfig, file.file);
this.imgOssName.push(imgObj.name);
this.fileNameList.push(file.file.name);
console.log(imgObj,'img-----')
if (imgObj.url) {
this.imgOssList.push(imgObj.url);
}
} catch (err) {
console.log(err,'-----')
this.$message({
type: "error",
message: "上传失败,请稍后再试",
});
console.log(err);
}
},
// 上传成功
imgSuccess(res,fileList) {
},
// 上传失败
imgError(res) {
this.$message({
type: "error",
message: "附件上传失败",
});
},
// 删除图片
imgRemove(file, fileList) {
this.fileList = fileList;
},
// 附件上传图片预览事件，放大这个就是将路径直接放进一个弹窗显示出来就可以了
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
console.log('aaaa',file.url)
},
// 处理图片路径
setImgUrl(imgArr) {
let arr = [];
if (imgArr.length>0) {
for (let i = 0; i < imgArr.length; i++) {
const element = imgArr[i];
arr.push(element.response.data.url);
//这个地方根据后台返回的数据进行取值，可以先打印一下
}
return arr.join();
} else {
return ''
}
},
login_in:function(){
this.deal()
if(this.test == ''){
alert('请填写内容')
console.log(this.test,111)
return
}if(this.phone == ''){
alert('请填写手机号')
console.log(this.phone,222)
return
}if(this.imgObj == ''){
alert('请上传图片')
return
}
//调提交接口
this.deal()
},
flod:function(){
// this.sigurature()
......@@ -174,6 +214,7 @@ export default {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
console.log('2222222222',this.dialogImageUrl)
},
handleDownload(file) {
......@@ -193,8 +234,8 @@ export default {
this.server.live.feedback(temp).then(res=>{
if(res.code=200){
phoneText= res.data.data.phoneText
this.phone= res.data.data.phone
this.phoneText= res.data.data.phoneText
}
})
......@@ -207,34 +248,46 @@ export default {
let temp=this.qs.stringify({
flag:11,
token:token
})
this.server.live.sigurature(temp).then(res=>{
this.server.live.getSigurature(temp).then(res=>{
if(res.code=200){
this.assumeRoleResponse = res.data.data.assumeRoleResponse.accessKeyId;
console.log(this.assumeRoleResponse,'===')
this.accessKeySecret = res.data.data.assumeRoleResponse.accessKeySecret;
this.expiration = res.data.data.assumeRoleResponse.expiration;
this.securityToken = res.data.data.assumeRoleResponse.securityToken;
// 12 22this.assumeRoleResponse = res.data.data.assumeRoleResponse.accessKeyId;
// this.accessKeySecret = res.data.data.assumeRoleResponse.accessKeySecret;
// this.expiration = res.data.data.assumeRoleResponse.expiration;
// this.securityToken = res.data.data.assumeRoleResponse.securityToken;
console.log(res.data.data.endPoint,1212);
// region: res.data.assumeRoleResponse.securityToken,
this.ossConfig.stsToken = res.data.data.assumeRoleResponse.securityToken,
this.ossConfig.osskeyId= res.data.data.assumeRoleResponse.accessKeyId;
this.ossConfig.osskeySecret= res.data.data.assumeRoleResponse.accessKeySecret;
this.ossConfig.ossBucket=res.data.data.bucketName;
this.ossConfig.endpoint =res.data.data.endPoint;
}
})
},
deal(){
let temp=this.qs.stringify({
// fbContext:,
// fbPhone:,
// imgs:,
fbContext:this.test,
fbPhone:this.phone,
imgs:this.imgObj,
})
this.server.live.deal(temp).then(res=>{
this.server.live.deal(temp).then(res=>{
console.log(this.phone,'ppp')
if(res.code=200){
console.log(res.data.data.businessMessage,'oiiiii')
// alert(res.data.data.businessMessage)
alert('反馈提交成功')
// window.location.href='./mine'
this.$router.push({name:'mine'})
}
})
},
......
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