fanfan
10 months ago
parent
1df9675a4f
commit
412a5f211b
@ -1,436 +1,517 @@ |
||||
<template> |
||||
<view class="invite"> |
||||
<view class="invite-notice"> |
||||
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar> |
||||
</view> |
||||
<view class="invite-hd"> |
||||
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> --> |
||||
<view class="btn" @click="openPage(3)"></view> |
||||
<view class="rule" @click="openPage(4)"></view> |
||||
</view> |
||||
<view class="invite-bd"> |
||||
<view class="invite-bd-a"> |
||||
<view class="a"> |
||||
<view class="l"> |
||||
累计邀请好友(人） |
||||
<view class="p">{{info.count_people}}</view> |
||||
</view> |
||||
<view class="l" style="border: none;"> |
||||
累计现金奖励(元） |
||||
<view class="p">{{info.money}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="b" @click="openPage(1)"> |
||||
我的邀请<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
<view class="c" @click="openPage(2)"> |
||||
立即提现<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
<view class="invite-bd-b"> |
||||
<image :src="$picUrl+'/static/news/invite-bg2.png'"></image> |
||||
<view class="a"> |
||||
<template> |
||||
<view class="invite"> |
||||
<view class="invite-notice"> |
||||
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar> |
||||
</view> |
||||
<view class="invite-hd"> |
||||
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> --> |
||||
<view class="btn" @click="openPage(3)"></view> |
||||
<view class="rule" @click="openPage(4)"></view> |
||||
</view> |
||||
<view class="invite-bd"> |
||||
<view class="invite-bd-a"> |
||||
<view class="a"> |
||||
<view class="l"> |
||||
可得188积分 |
||||
累计邀请好友(人） |
||||
<view class="p">{{info.count_people}}</view> |
||||
</view> |
||||
<view class="l" style="border: none;"> |
||||
累计现金奖励(元） |
||||
<view class="p">{{info.money}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="b" @click="openPage(1)"> |
||||
我的邀请<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
<view class="c" @click="openPage(2)"> |
||||
立即提现<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
<view class="invite-bd-b"> |
||||
<image :src="$picUrl+'/static/news/invite-bg2.png'"></image> |
||||
<view class="a"> |
||||
<view class="l"> |
||||
可得188积分 |
||||
<!-- 可得{{info.integral}}积分 |
||||
<br />{{info.coupon_name}} --> |
||||
</view> |
||||
<br />{{info.coupon_name}} --> |
||||
</view> |
||||
<view class="l"> |
||||
可返现3-5% |
||||
<!-- 可返现{{info.one_order_rate}}% --> |
||||
</view> |
||||
可返现3-5% |
||||
<!-- 可返现{{info.one_order_rate}}% --> |
||||
</view> |
||||
<view class="l"> |
||||
新人首单礼 |
||||
<!-- {{info.one_order_rate}}元{{info.coupon_name}} --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="invite-bd-c"> |
||||
<image :src="$picUrl+'/static/news/invite-bg3.png'"></image> |
||||
<view class="a"> |
||||
新人首单礼 |
||||
<!-- {{info.one_order_rate}}元{{info.coupon_name}} --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="invite-bd-c"> |
||||
<image :src="$picUrl+'/static/news/invite-bg3.png'"></image> |
||||
<view class="a"> |
||||
<view class="l"> |
||||
优惠券 |
||||
<!-- {{info.one_order_rate}}元{{info.coupon_name}} --> |
||||
</view> |
||||
优惠券 |
||||
<!-- {{info.one_order_rate}}元{{info.coupon_name}} --> |
||||
</view> |
||||
<view class="l"> |
||||
积分 |
||||
<!-- {{info.integral}}积分 --> |
||||
</view> |
||||
积分 |
||||
<!-- {{info.integral}}积分 --> |
||||
</view> |
||||
<view class="l"> |
||||
长期返现 |
||||
<!-- 首单返{{info.one_order_rate}}% --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="invite-bd-d"> |
||||
<image :src="$picUrl+'/static/news/invite-bg4.png'"></image> |
||||
<view class="p" @click="openPage(3)">立即邀请</view> |
||||
</view> --> |
||||
</view> |
||||
<!-- --> |
||||
<view class="invite-popup" v-if="isPopup"> |
||||
<view class="popup" @click="download()"> |
||||
<image class="bg" :src="qrcode"></image> |
||||
<view class="tips">保存海报图</view> |
||||
<view class="close"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { createQrCodeImg } from '@/utils/qrcode' |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
qrcode: "", |
||||
userInfo: {}, |
||||
backgroundBg: { |
||||
"background": "rgba(255,255,255,0.22)" |
||||
}, |
||||
backgroundBg1: { |
||||
"background-color": "transparent" |
||||
}, |
||||
isPopup: false, |
||||
info: {}, |
||||
list: ["邀请更多好友，获得更多奖金"] |
||||
} |
||||
}, |
||||
onReady() { |
||||
this.getList(); |
||||
}, |
||||
onShow() { |
||||
if(uni.getStorageSync("AccessToken")){ |
||||
this.userInfo = uni.getStorageSync("userInfo"); |
||||
// this.qrcode = createQrCodeImg(this.userInfo.user_id, { 'size': 500 }); |
||||
}else{ |
||||
this.userInfo = {} |
||||
// this.qrcode = "" |
||||
} |
||||
}, |
||||
长期返现 |
||||
<!-- 首单返{{info.one_order_rate}}% --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="invite-bd-d"> |
||||
<image :src="$picUrl+'/static/news/invite-bg4.png'"></image> |
||||
<view class="p" @click="openPage(3)">立即邀请</view> |
||||
</view> --> |
||||
</view> |
||||
<!-- --> |
||||
<view class="invite-popup" v-if="isPopup"> |
||||
<view class="popup" @click="download()"> |
||||
<image class="bg" :src="qrcode"></image> |
||||
<view class="tips">保存海报图</view> |
||||
<view class="close"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
createQrCodeImg |
||||
} from '@/utils/qrcode' |
||||
import * as newFunApi from '@/api/newFun' |
||||
import * as Api from '@/api/help' |
||||
export default { |
||||
data() { |
||||
return { |
||||
qrcode: "", |
||||
userInfo: {}, |
||||
backgroundBg: { |
||||
"background": "rgba(255,255,255,0.22)" |
||||
}, |
||||
backgroundBg1: { |
||||
"background-color": "transparent" |
||||
}, |
||||
isPopup: false, |
||||
info: {}, |
||||
list: [] |
||||
} |
||||
}, |
||||
onReady() { |
||||
this.getList(); |
||||
this.getCarousel() |
||||
}, |
||||
onShow() { |
||||
if (uni.getStorageSync("AccessToken")) { |
||||
this.userInfo = uni.getStorageSync("userInfo"); |
||||
// this.qrcode = createQrCodeImg(this.userInfo.user_id, { 'size': 500 }); |
||||
} else { |
||||
this.userInfo = {} |
||||
// this.qrcode = "" |
||||
} |
||||
}, |
||||
methods: { |
||||
// 获取预售规则 |
||||
getCarousel(type) { |
||||
const app = this; |
||||
app.list = [] |
||||
Api.getAgreement({ |
||||
type: 'invite_notice' |
||||
}) |
||||
.then(result => { |
||||
if (result.data.detail.content) { |
||||
app.list.push(this.formatRichText(result.data.detail.content)) |
||||
} |
||||
}) |
||||
.finally(() => app.isLoading = false) |
||||
}, |
||||
formatRichText(value) { |
||||
value = value.replace(/\s*/g, ""); //去掉空格 |
||||
value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记 |
||||
value = value.replace(/↵/g, ""); //去掉所有的↵符号 |
||||
value = value.replace(/[\r\n]/g, "") //去掉回车换行 |
||||
value = value.replace(/ /g, "") //去掉空格 |
||||
value = this.convertIdeogramToNormalCharacter(value); |
||||
return value |
||||
}, |
||||
convertIdeogramToNormalCharacter(val) { |
||||
const arrEntities = { |
||||
'lt': '<', |
||||
'gt': '>', |
||||
'nbsp': ' ', |
||||
'amp': '&', |
||||
'quot': '"' |
||||
}; |
||||
return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { |
||||
return arrEntities[t]; |
||||
}); |
||||
}, |
||||
//生成海报 |
||||
async InviteUserPoster() { |
||||
const {status, data} = await newFunApi.InviteUserPoster({}); |
||||
if(status == 200){ |
||||
const { |
||||
status, |
||||
data |
||||
} = await newFunApi.InviteUserPoster({}); |
||||
if (status == 200) { |
||||
console.log(data) |
||||
this.qrcode = data.imageUrl |
||||
} |
||||
}, |
||||
}, |
||||
download() { |
||||
const app = this |
||||
app.isPopup = false; |
||||
uni.showLoading({ title: '加载中' }) |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
// 下载海报图片 |
||||
uni.downloadFile({ |
||||
url: app.qrcode, |
||||
success(res) { |
||||
console.log(res) |
||||
uni.hideLoading() |
||||
// 图片保存到相册 |
||||
app.onSaveImage(res.tempFilePath) |
||||
}, |
||||
fail(res) { |
||||
console.log('fail', res) |
||||
uni.hideLoading() |
||||
app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000) |
||||
} |
||||
}) |
||||
url: app.qrcode, |
||||
success(res) { |
||||
console.log(res) |
||||
uni.hideLoading() |
||||
// 图片保存到相册 |
||||
app.onSaveImage(res.tempFilePath) |
||||
}, |
||||
fail(res) { |
||||
console.log('fail', res) |
||||
uni.hideLoading() |
||||
app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000) |
||||
} |
||||
}) |
||||
}, |
||||
// 图片保存到相册 |
||||
onSaveImage(tempFilePath) { |
||||
const app = this |
||||
// #ifndef H5 |
||||
uni.saveImageToPhotosAlbum({ |
||||
filePath: tempFilePath, |
||||
success(data) { |
||||
app.$success('保存成功') |
||||
}, |
||||
fail(err) { |
||||
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { |
||||
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000) |
||||
} |
||||
} |
||||
}) |
||||
// #endif |
||||
// #ifdef H5 |
||||
const names = tempFilePath.split('/') |
||||
const fileName = names[names.length - 1] |
||||
app.fileDownLoadForH5({ name: fileName, blob: tempFilePath }) |
||||
// #endif |
||||
const app = this |
||||
// #ifndef H5 |
||||
uni.saveImageToPhotosAlbum({ |
||||
filePath: tempFilePath, |
||||
success(data) { |
||||
app.$success('保存成功') |
||||
}, |
||||
fail(err) { |
||||
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { |
||||
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000) |
||||
} |
||||
} |
||||
}) |
||||
// #endif |
||||
// #ifdef H5 |
||||
const names = tempFilePath.split('/') |
||||
const fileName = names[names.length - 1] |
||||
app.fileDownLoadForH5({ |
||||
name: fileName, |
||||
blob: tempFilePath |
||||
}) |
||||
// #endif |
||||
}, |
||||
|
||||
|
||||
// 兼容H5端下载图片 |
||||
// #ifdef H5 |
||||
fileDownLoadForH5({ name, blob }) { |
||||
const linkElement = document.createElement('a') |
||||
linkElement.setAttribute('href', blob) |
||||
linkElement.setAttribute('downLoad', name) |
||||
linkElement.click() |
||||
fileDownLoadForH5({ |
||||
name, |
||||
blob |
||||
}) { |
||||
const linkElement = document.createElement('a') |
||||
linkElement.setAttribute('href', blob) |
||||
linkElement.setAttribute('downLoad', name) |
||||
linkElement.click() |
||||
}, |
||||
// #endif |
||||
async getList() { |
||||
uni.showLoading({ |
||||
title: "加载中" |
||||
}) |
||||
const { |
||||
status, |
||||
data |
||||
} = await newFunApi.inviteInit({}); |
||||
if (status == 200) { |
||||
uni.hideLoading(); |
||||
this.info = data; |
||||
console.log(this.info) |
||||
} |
||||
}, |
||||
// #endif |
||||
async getList() { |
||||
uni.showLoading({ |
||||
title:"加载中" |
||||
}) |
||||
const {status, data} = await newFunApi.inviteInit({}); |
||||
if(status == 200){ |
||||
uni.hideLoading(); |
||||
this.info = data; |
||||
console.log(this.info) |
||||
} |
||||
}, |
||||
openPage(index){ |
||||
if(!uni.getStorageSync("AccessToken")){ |
||||
uni.navigateTo({ |
||||
url: "/pages/login/index" |
||||
}) |
||||
return ; |
||||
} |
||||
if(index == 1){ |
||||
uni.navigateTo({ |
||||
url: "/pages/invite/list" |
||||
}) |
||||
}else if(index == 2){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news/user/withdrawal?balance="+ this.userInfo.pay_money |
||||
}) |
||||
}else if(index == 3){ |
||||
openPage(index) { |
||||
if (!uni.getStorageSync("AccessToken")) { |
||||
uni.navigateTo({ |
||||
url: "/pages/login/index" |
||||
}) |
||||
return; |
||||
} |
||||
if (index == 1) { |
||||
uni.navigateTo({ |
||||
url: "/pages/invite/list" |
||||
}) |
||||
} else if (index == 2) { |
||||
uni.navigateTo({ |
||||
url: "/pages/news/user/withdrawal?balance=" + this.userInfo.pay_money |
||||
}) |
||||
} else if (index == 3) { |
||||
this.isPopup = true; |
||||
this.InviteUserPoster(); |
||||
}else if(index == 4){ |
||||
this.InviteUserPoster(); |
||||
} else if (index == 4) { |
||||
uni.navigateTo({ |
||||
url: "/pages/invite/rule" |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.invite{ |
||||
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat; |
||||
background-size: 100% auto; |
||||
&-popup{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(0, 0, 0, 0.6); |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 55; |
||||
.popup{ |
||||
width: 672rpx; |
||||
height: 912rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -336rpx; |
||||
top: 50%; |
||||
margin-top: -456rpx; |
||||
z-index: 2; |
||||
.bg{ |
||||
width: 672rpx; |
||||
height: 100%; |
||||
border-radius: 26rpx; |
||||
} |
||||
.qrcode{ |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
position: absolute; |
||||
right: 25rpx; |
||||
top: 670rpx; |
||||
border: 8rpx solid #FFFFFF; |
||||
z-index: 2; |
||||
border-radius: 5rpx; |
||||
} |
||||
.tips{ |
||||
width: 100%; |
||||
height: 30rpx; |
||||
position: absolute; |
||||
text-align: center; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
left: 0; |
||||
bottom: -50rpx; |
||||
z-index: 2; |
||||
} |
||||
.close{ |
||||
width: 60rpx; |
||||
height: 60rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: -150rpx; |
||||
color: #FFFFFF; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
|
||||
} |
||||
&-notice{ |
||||
// background-color: #FF5554; |
||||
} |
||||
&-hd{ |
||||
width: 100%; |
||||
text-align: center; |
||||
// background-color: #FF5554; |
||||
height: 436rpx; |
||||
position: relative; |
||||
.rule{ |
||||
width: 130rpx; |
||||
height: 50rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 208rpx; |
||||
z-index: 2; |
||||
} |
||||
.btn{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -205rpx; |
||||
bottom:0rpx; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
&-bd{ |
||||
padding: 0 32rpx 60rpx 32rpx; |
||||
// background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%); |
||||
overflow: hidden; |
||||
&-a{ |
||||
width: 100%; |
||||
height: 366rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
margin-top: 40rpx; |
||||
.a{ |
||||
padding: 50rpx 0 30rpx; |
||||
overflow: hidden; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
text-align: center; |
||||
.l{ |
||||
flex: 1; |
||||
border-right: 1px solid #DDDDDD; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #414141; |
||||
.p{ |
||||
font-size: 54rpx; |
||||
font-weight: 500; |
||||
color: #FF5251; |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
.b{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%); |
||||
border-radius: 106rpx; |
||||
border: 1px solid #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: #FFFFFF; |
||||
margin: 0 auto; |
||||
} |
||||
.c{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 24rpx; |
||||
color: #FF5251; |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
&-b{ |
||||
width: 100%; |
||||
height: 515rpx; |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.a{ |
||||
width: 100%; |
||||
bottom: 40rpx; |
||||
padding: 0 25rpx; |
||||
box-sizing: border-box; |
||||
z-index: 1; |
||||
left: 0; |
||||
position: absolute; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.l{ |
||||
flex: 1; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #FF4D4C; |
||||
} |
||||
} |
||||
} |
||||
&-c{ |
||||
width: 100%; |
||||
height: 375rpx; |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.a{ |
||||
width: 260rpx; |
||||
bottom: -60rpx; |
||||
box-sizing: border-box; |
||||
z-index: 1; |
||||
right: 0; |
||||
position: absolute; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
.l{ |
||||
width: 130rpx; |
||||
height: 135rpx; |
||||
text-align: center; |
||||
font-size: 22rpx; |
||||
font-weight: 500; |
||||
color: #414141; |
||||
} |
||||
} |
||||
} |
||||
&-d{ |
||||
width: 100%; |
||||
height: 108rpx; |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.p{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
text-align: center; |
||||
line-height: 105rpx; |
||||
font-size: 36rpx; |
||||
font-weight: 500; |
||||
color: #FF5251; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.invite { |
||||
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat; |
||||
background-size: 100% auto; |
||||
|
||||
&-popup { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(0, 0, 0, 0.6); |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 55; |
||||
|
||||
.popup { |
||||
width: 672rpx; |
||||
height: 912rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -336rpx; |
||||
top: 50%; |
||||
margin-top: -456rpx; |
||||
z-index: 2; |
||||
|
||||
.bg { |
||||
width: 672rpx; |
||||
height: 100%; |
||||
border-radius: 26rpx; |
||||
} |
||||
|
||||
.qrcode { |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
position: absolute; |
||||
right: 25rpx; |
||||
top: 670rpx; |
||||
border: 8rpx solid #FFFFFF; |
||||
z-index: 2; |
||||
border-radius: 5rpx; |
||||
} |
||||
|
||||
.tips { |
||||
width: 100%; |
||||
height: 30rpx; |
||||
position: absolute; |
||||
text-align: center; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
left: 0; |
||||
bottom: -50rpx; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.close { |
||||
width: 60rpx; |
||||
height: 60rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: -150rpx; |
||||
color: #FFFFFF; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
&-notice { |
||||
// background-color: #FF5554; |
||||
} |
||||
|
||||
&-hd { |
||||
width: 100%; |
||||
text-align: center; |
||||
// background-color: #FF5554; |
||||
height: 436rpx; |
||||
position: relative; |
||||
|
||||
.rule { |
||||
width: 130rpx; |
||||
height: 50rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 208rpx; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.btn { |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -205rpx; |
||||
bottom: 0rpx; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
|
||||
&-bd { |
||||
padding: 0 32rpx 60rpx 32rpx; |
||||
// background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%); |
||||
overflow: hidden; |
||||
|
||||
&-a { |
||||
width: 100%; |
||||
height: 366rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
margin-top: 40rpx; |
||||
|
||||
.a { |
||||
padding: 50rpx 0 30rpx; |
||||
overflow: hidden; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
text-align: center; |
||||
|
||||
.l { |
||||
flex: 1; |
||||
border-right: 1px solid #DDDDDD; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #414141; |
||||
|
||||
.p { |
||||
font-size: 54rpx; |
||||
font-weight: 500; |
||||
color: #FF5251; |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.b { |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%); |
||||
border-radius: 106rpx; |
||||
border: 1px solid #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: #FFFFFF; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.c { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 24rpx; |
||||
color: #FF5251; |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
|
||||
&-b { |
||||
width: 100%; |
||||
height: 515rpx; |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.a { |
||||
width: 100%; |
||||
bottom: 40rpx; |
||||
padding: 0 25rpx; |
||||
box-sizing: border-box; |
||||
z-index: 1; |
||||
left: 0; |
||||
position: absolute; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.l { |
||||
flex: 1; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #FF4D4C; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-c { |
||||
width: 100%; |
||||
height: 375rpx; |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.a { |
||||
width: 260rpx; |
||||
bottom: -60rpx; |
||||
box-sizing: border-box; |
||||
z-index: 1; |
||||
right: 0; |
||||
position: absolute; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
.l { |
||||
width: 130rpx; |
||||
height: 135rpx; |
||||
text-align: center; |
||||
font-size: 22rpx; |
||||
font-weight: 500; |
||||
color: #414141; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-d { |
||||
width: 100%; |
||||
height: 108rpx; |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.p { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
text-align: center; |
||||
line-height: 105rpx; |
||||
font-size: 36rpx; |
||||
font-weight: 500; |
||||
color: #FF5251; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,234 @@ |
||||
<template> |
||||
<view class="install"> |
||||
<view class="install_notice"> |
||||
尊敬的用户，为了方便您<text>下单的产品</text>预约安装、售后保修以及咨询官方客服，我们将家电、手机、平板、笔记本电脑的主流品牌的预约安装，售后保修的<text>官方链接整理如下</text>，您只需要对应好品类，选择相应的品牌即可直接预约安装、售后报修、查询官方服务站，以及<text>联系官方客服</text>。 |
||||
</view> |
||||
<view class="install_content" v-for="(item,index) in list"> |
||||
<view class="install_name">{{item.name}}</view> |
||||
<view class="install_bao"> |
||||
<view class="install_xiu" v-for="(child,index) in item.children" :key="index" @click="onLookCord"> |
||||
{{child.name}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="install_kefu"> |
||||
<view class="install_cont"> |
||||
感谢您对我们的信任与支持!如果您的订单有什么疑问，或者需要帮助，请您在线联系我们的客服人员，我司全体工作人员竭诚为您服务! |
||||
</view> |
||||
</view> |
||||
<!-- 核销二维码弹窗 --> |
||||
<view class="bigCode" v-if="showQRCodePopup" @click="showQRCodePopup=false"> |
||||
<view class="cm"> |
||||
<view class="cm_text"> |
||||
识别二维码 |
||||
</view> |
||||
<view class="txm"> |
||||
<image :src="qrcode" |
||||
@click="clickImg" mode="" class="codeImg"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as newFunApi from '@/api/newFun' |
||||
import { |
||||
createQrCodeImg |
||||
} from '@/utils/qrcode' |
||||
export default { |
||||
data() { |
||||
return { |
||||
showQRCodePopup: false, |
||||
list: [{ |
||||
name: '空调报修', |
||||
children: [{ |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调外机维修' |
||||
}, { |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调外机维修' |
||||
}, { |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调漏水' |
||||
}, { |
||||
name: '空调外机维修' |
||||
}] |
||||
}, { |
||||
name: '电视报修', |
||||
children: [{ |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视外机维修' |
||||
}, { |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视外机维修' |
||||
}, { |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视黑屏' |
||||
}, { |
||||
name: '电视外机维修' |
||||
}] |
||||
}], |
||||
qrcode:'' |
||||
}; |
||||
}, |
||||
onLoad(o) {}, |
||||
methods: { |
||||
onLookCord() { |
||||
this.showQRCodePopup = true |
||||
let url='https://www.cnblogs.com/majiayin/p/16359337.html' |
||||
this.qrcode = createQrCodeImg(url, { 'size': 500 }); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.install { |
||||
overflow: hidden; |
||||
margin: 20rpx; |
||||
|
||||
.bigCode { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(65, 65, 65, 0.46); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.cm { |
||||
width: 560rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
opacity: 1; |
||||
padding: 40rpx 0 50rpx 0; |
||||
|
||||
.cm_text { |
||||
width: 100%; |
||||
height: 42rpx; |
||||
font-size: 30rpx; |
||||
font-weight: 500; |
||||
color: #424242; |
||||
line-height: 42rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.txm { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 30rpx; |
||||
|
||||
.codeImg { |
||||
width: 394rpx; |
||||
height: 394rpx; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.install_content { |
||||
width: 100%; |
||||
// height: 385rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
margin-top: 25rpx; |
||||
|
||||
.install_name { |
||||
height: 80rpx; |
||||
background-image: url('/static/install/install_name.png'); |
||||
background-size: cover; |
||||
background-position: center; |
||||
font-family: Alibaba PuHuiTi; |
||||
font-weight: 400; |
||||
font-size: 34rpx; |
||||
line-height: 80rpx; |
||||
color: #222222; |
||||
padding-left: 32rpx; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.install_bao { |
||||
overflow: hidden; |
||||
padding: 25rpx 30rpx 5rpx 30rpx; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-wrap: wrap; |
||||
|
||||
.install_xiu { |
||||
font-family: Alibaba PuHuiTi; |
||||
font-weight: 400; |
||||
font-size: 30rpx; |
||||
color: #222222; |
||||
padding: 0 32rpx; |
||||
height: 70rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
border: 1rpx solid #CCCCCC; |
||||
text-align: center; |
||||
line-height: 70rpx; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.install_kefu { |
||||
width: 100%; |
||||
height: 244rpx; |
||||
background-image: url('/static/install/install_footer.png'); |
||||
background-size: cover; |
||||
font-family: Alibaba PuHuiTi; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
line-height: 48rpx; |
||||
margin-bottom: 50rpx; |
||||
margin-top: 20rpx; |
||||
position: relative; |
||||
|
||||
.install_cont { |
||||
position: absolute; |
||||
right: 30rpx; |
||||
top: 28rpx; |
||||
width: 450rpx; |
||||
} |
||||
} |
||||
|
||||
.install_notice { |
||||
width: 100%; |
||||
height: 354rpx; |
||||
background-image: url('/static/install/install_hedaer.png'); |
||||
background-size: cover; |
||||
font-family: Alibaba PuHuiTi; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
padding: 35rpx; |
||||
line-height: 48rpx; |
||||
|
||||
text { |
||||
font-weight: 700; |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 67 KiB |
Loading…
Reference in new issue