Skip to content

M
marketing
Commit b16ca4c6 by crushh
Options

update: 基础配置

parent 127589e8
Showing with 488 additions and 21 deletions
src/assets/style/base/reset.scss
......@@ -150,6 +150,9 @@ a:hover {
.mt15{
margin-top: 15px!important;
}
.mt16{
margin-top: 16px!important;
}
.mt17{
margin-top: 17px!important;
}
......
src/views/game/cmh/base-config.vue
......@@ -12,10 +12,13 @@
<el-radio v-for="item in templateData" v-model="baseForm.templateId" :label="item.templateId" :key="item.templateId">{{ item.templateName }}</el-radio>
</el-form-item>
<el-form-item label="游戏背景" prop="backImageUrl">
<img :src="baseForm.backImageUrl" alt="游戏背景" style="width: 100px;height: 193px;" />
<el-upload class="avatar-uploader" action="123" :show-file-list="false" :before-upload="file => beforeAvatarUpload(file, 'backImageUrl', baseForm.backImageUrlSize1)">
<el-button type="text">替换图片</el-button>
</el-upload>
<div class="flex">
<img :src="baseForm.backImageUrl" alt="游戏背景" style="width: 100px;height: 193px;" />
<el-upload class="avatar-uploader" action="123" :show-file-list="false" :before-upload="file => beforeAvatarUpload(file, 'backImageUrl', baseForm.backImageUrlSize1)">
<el-button type="text" class="ml16">替换图片</el-button>
</el-upload>
</div>
<div class="tips">图片建议尺寸{{ baseForm.backImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.backImageUrlSize1 }} 以内。</div>
</el-form-item>
<el-form-item label="抽奖样式" prop="gameName">
......@@ -52,30 +55,43 @@
</div>
</el-form-item>
<el-form-item label="提示样式" prop="noticeImageUrl">
<img :src="baseForm.noticeImageUrl" alt="提示样式" class="imgBox" />
<el-upload class="avatar-uploader" action="123" :show-file-list="false" :before-upload="file => beforeAvatarUpload(file, 'noticeImageUrl', baseForm.noticeImageUrlSize1)">
<el-button type="text">替换图片</el-button>
</el-upload>
<div class="flex">
<img :src="baseForm.noticeImageUrl" alt="提示样式" class="imgBox" />
<el-upload class="avatar-uploader" action="123" :show-file-list="false" :before-upload="file => beforeAvatarUpload(file, 'noticeImageUrl', baseForm.noticeImageUrlSize1)">
<el-button type="text" class="ml16">替换图片</el-button>
</el-upload>
</div>
<div class="tips">图片建议尺寸 {{ baseForm.noticeImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.noticeImageUrlSize1 }}以内。</div>
</el-form-item>
<el-form-item label="背景音乐" prop="gameName">
<el-switch v-model="baseForm.backMusicFlag" :active-value="1" :inactive-value="0" />
<el-button size="small" @click="handleListen"><i :class="['iconfont fz14', isPlay ? 'icon-zanting' : 'icon-kaiqi']"></i> 点击试听</el-button>
<el-select v-model="baseForm.backMusicUrl" value-key="materialValue" style="width: 381px;" @clear="handleClear" :clearable="customMusicOptions.length">
<el-option v-for="item in backMusicOptionsComputed" :key="item.materialValue" :value="item" :label="item.materialName"> </el-option>
</el-select>
<audio-upload tips="" @sendAduioList="setAudioList" :textType="true" label="替换音乐"></audio-upload>
<div class="flex mt16">
<div>
<el-button size="small" @click="handleListen"><i :class="['iconfont fz14', isPlay ? 'icon-zanting' : 'icon-kaiqi']"></i> 点击试听</el-button>
<el-select v-model="baseForm.backMusicUrl" value-key="materialValue" style="width: 380px;" @clear="handleClear" :clearable="customMusicOptions.length">
<el-option v-for="item in backMusicOptionsComputed" :key="item.materialValue" :value="item" :label="item.materialName"> </el-option>
</el-select>
</div>
<audio-upload tips="" @sendAduioList="setAudioList" :textType="true" label="替换音乐"></audio-upload>
</div>
</el-form-item>
<el-form-item label="氛围弹幕" prop="gameName">
<el-switch v-model="baseForm.bulletFlag" :active-value="1" :inactive-value="0" />
<div class="tips">开启后，如有三名以上用户获奖后，活动首页将轮播展示用户中奖信息。</div>
<div class="tips mt10">开启后，如有三名以上用户获奖后，活动首页将轮播展示用户中奖信息。</div>
</el-form-item>
<el-form-item label="广告位" prop="adsImageUrl">
<el-switch v-model="baseForm.adsFlag" :active-value="1" :inactive-value="0" />
<div class="adsImg">
<dm-upload-avatar width="375" height="75" :limit="{ type: false, maxSize: 1 }" fileType="img" :model.sync="adsImageUrl" label="上传图片" tips="" @backImg="handleAdsChange" :unused="isInfo"></dm-upload-avatar>
<div class="tips">图片建议尺寸{{ baseForm.adsImageUrlSize0 }}或等比图片，格式 jpg/png/gif，大小{{ baseForm.adsImageUrlSize1 }} 以内。</div>
<el-form-item label="小程序跳转路径" prop="link"> </el-form-item>
<dm-upload-avatar class="upload-avatar" width="375" height="75" :limit="{ type: false, maxSize: 1 }" fileType="img" :model.sync="adsImageUrl" label="上传图片" tips="" @backImg="handleAdsChange" :unused="isInfo"></dm-upload-avatar>
<div class="tips" style="margin-bottom: 20px;">图片建议尺寸{{ baseForm.adsImageUrlSize0 }}或等比图片，格式 jpg/png/gif，大小{{ baseForm.adsImageUrlSize1 }} 以内。</div>
<el-form-item label="小程序跳转路径" prop="link" label-width="110px">
<div class="wxapp mr16" v-if="selectLink.linkData.name">
{{ selectLink.linkData.name }}
</div>
<el-button type="text" @click="selectLink.show = true"> 选择链接 </el-button>
</el-form-item>
<linktools :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :can-save="true" :showType="0" @linkSelect="onSaveLink" />
</div>
</el-form-item>
</div>
......@@ -86,6 +102,7 @@
import config from '@/config';
import dmUploadAvatar from '@/components/upload/avatar';
import dmUploadImg from '@/components/upload/img';
import Linktools from '@/components/linktools-fulls/index.vue';
import audioUpload from '../common/audio-upload.vue';
let _minTime = null;
let _maxTime = null;
......@@ -131,6 +148,11 @@ export default {
return time.getTime() > new Date().getTime();
}
}
},
// 链接小工具选择链接
selectLink: {
show: false,
linkData: {}
}
};
},
......@@ -143,7 +165,8 @@ export default {
components: {
dmUploadAvatar,
dmUploadImg,
audioUpload
audioUpload,
Linktools
},
computed: {
backMusicOptionsComputed() {
......@@ -262,6 +285,11 @@ export default {
handleAdsChange(obj) {
console.log(obj);
this.baseForm.adsImageUrl = obj.imgUrl;
},
// 保存链接小工具返回的链接数据
onSaveLink(linkData) {
console.log(linkData);
this.selectLink.linkData = linkData;
}
}
};
......@@ -318,5 +346,31 @@ export default {
height: 187px;
background: #f7f8fa;
padding: 16px 20px;
box-sizing: border-box;
margin-top: 16px;
}
.wxapp {
width: 253px;
height: 32px;
background: #f2f3f5;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 11px;
box-sizing: border-box;
display: inline-flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.upload-avatar {
/deep/.dm-avatar__upload {
background: #fff;
}
}
/deep/.dm-avatar__upload {
background: #fff;
}
.dm-avatar__upload {
background: #fff;
}
</style>
src/views/game/cmh/form.vue
......@@ -17,7 +17,13 @@
{{ el }}
</el-menu-item>
</el-menu>
<div class="iphone" v-if="menuActive == 0">iphone</div>
<div class="iphone" v-if="menuActive == 0">
<!-- <img src="../../../assets/img/Navbar.png" alt="" />
<img :src="templateData.length && templateData[0].materialMap.backImageUrl[0].materialValue" style="width: 375px;height: 724px;" />
<div class="mhcontent"></div> -->
<img src="../../../assets/img/Navbar.png" alt="" />
<gameTemplate />
</div>
<div class="iphone" v-else>
<img :src="bcImg[menuActive]" />
</div>
......@@ -44,6 +50,8 @@ import steps from '@/views/game/dm-steps/steps';
import step from '@/views/game/dm-step/step';
import baseConfig from './base-config.vue';
import { getGameTemplateByType } from '@/service/api/gameApi.js';
import gameTemplate from './gameTemplate';
export default {
data() {
return {
......@@ -61,7 +69,8 @@ export default {
components: {
'dm-steps': steps,
'dm-step': step,
baseConfig
baseConfig,
gameTemplate
},
mounted() {
......@@ -181,7 +190,7 @@ export default {
}
.iphone {
width: 375px;
height: 88px;
background: #ffffff;
border-radius: 8px 8px 0px 0px;
margin: 0 20px 0 13px;
......
src/views/game/cmh/gameTemplate.vue 0 → 100644
<template>
<div class="template-game">
<img class="bg-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png" />
<router-link :to="'/rule'">
<div class="right-btn rule">游戏规则</div>
</router-link>
<router-link :to="'/rule'">
<div class="right-btn award">我的奖品</div>
</router-link>
<div class="content">
<div class="music-icon iconfont" :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'" @click="playMusic"></div>
<div class="integral">100积分/次</div>
<!-- <swiper
class="swiper-class"
ref="mySwiper"
:options="swiperOptions"
:autoplay="swiperOptions.autoplay"
>
<swiper-slide v-for="item in list" :key="item">
<div class="swiper-item">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/tips_bg.png"
/>
<span>{{ item }}</span>
</div>
</swiper-slide>
</swiper> -->
<div class="box-box">
<img v-for="item in boxList" :key="item" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png" :style="{ left: item.left, top: item.top }" @click="showOpenBoxDialog = true" />
</div>
<div class="points-count-box">
<div class="text-box">
<div class="text">1500</div>
<img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
<img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/我的积分.png" />
</div>
<div class="game-name-box">
<div class="line left"></div>
<div class="game-name">点击盲盒抽取好礼</div>
<div class="line right"></div>
</div>
<div class="text-box">
<div class="text">55</div>
<img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
<img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/剩余次数.png" />
</div>
</div>
<img class="ad-image" src="" mode="widthFix" />
<div class="share-box" @click="clickShareBtn">
<div class="icon">
<div class="iconfont icon-yaoqing"></div>
</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/邀请助力.png" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ['刷卡拉拉卡', '阿拉卡萨卢克和史莱克', '刷卡拉拉卡', '阿拉卡萨卢克和史莱克'],
boxList: [
{
left: '51%',
top: '214px'
},
{
left: '33%',
top: '262px'
},
{
left: '66%',
top: '258px'
},
{
left: '16%',
top: '307px'
},
{
left: '52%',
top: '306px'
},
{
left: '84%',
top: '307px'
},
{
left: '35%',
top: '351px'
},
{
left: '68%',
top: '355px'
},
{
left: '53%',
top: '400px'
}
],
isPlay: true,
name: '猜盲盒'
};
},
created() {
document.title = '猜盲盒';
}
};
</script>
<style lang="scss" scoped>
.template-game {
}
.bg-image {
width: 375px;
position: absolute;
height: 724px;
overflow-y: auto;
}
.content {
position: relative;
z-index: 1;
}
.music-icon {
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
background: rgba(39, 41, 43, 0.5);
color: white;
font-size: 20px;
/* transform: rotate(90deg); */
}
@keyframes transform {
0% {
transform: rotate(0%);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.music-icon.icon-yinfu {
animation-name: transform;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.right-btn {
writing-mode: tb-rl;
position: fixed;
right: 0;
top: 20px;
padding: 7px 5px;
border-radius: 8px 0 0 8px;
background: rgba(39, 41, 43, 0.5);
z-index: 10;
color: white;
font-size: 11px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.right-btn.award {
top: 89px;
}
.integral {
position: absolute;
z-index: 2;
top: 126px;
left: 50%;
transform: translateX(-50%);
min-width: 120px;
height: 24px;
line-height: 24px;
text-align: center;
padding: 0 10px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid white;
background: rgba(255, 255, 255, 0.3);
color: #27292b;
font-size: 12px;
}
.swiper-class {
position: absolute;
left: 20px;
top: 160px;
z-index: 10;
width: 300px;
height: 36px;
}
.swiper-item {
width: 300px;
height: 36px;
box-sizing: border-box;
border-radius: 17px 0 0 17px;
position: relative;
display: flex;
align-items: center;
}
.swiper-item img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.swiper-item span {
padding-left: 30px;
color: white;
font-size: 12px;
z-index: 2;
}
.box-box {
height: 531px;
width: 100%;
position: relative;
}
@keyframes box-animation {
from {
transform: translate(-50%, -50%);
}
to {
transform: translate(-50%, 0);
}
}
.box-box img {
position: absolute;
transform: translate(-50%, 0);
width: 95px;
height: 95px;
animation-timing-function: ease-in;
/* animation-name: box-animation; */
animation-duration: 1s;
}
.box-box img:nth-child(1) {
animation-delay: 0s;
}
.box-box img:nth-child(2) {
animation-delay: 0.1s;
}
.box-box img:nth-child(3) {
animation-delay: 0.2s;
}
.box-box img:nth-child(4) {
animation-delay: 0.3s;
}
.box-box img:nth-child(5) {
animation-delay: 0.4s;
}
.box-box img:nth-child(6) {
animation-delay: 0.5s;
}
.box-box img:nth-child(7) {
animation-delay: 0.6s;
}
.box-box img:nth-child(8) {
animation-delay: 0.7s;
}
.box-box img:nth-child(9) {
animation-delay: 0.8s;
}
.points-count-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
}
.text-box {
position: relative;
text-align: center;
}
.text-box .text {
font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px;
font-weight: 600;
color: #388ccc;
line-height: 23px;
position: relative;
z-index: 2;
}
.text-box .text-shadow {
position: absolute;
left: 50%;
top: 17px;
transform: translateX(-50%);
width: 41px;
height: 8px;
z-index: 1;
}
.text-box .title-image {
padding-top: 5px;
width: 48px;
height: 16px;
}
.game-name-box {
display: flex;
align-items: center;
position: relative;
}
.game-name-box .line {
width: 13px;
height: 3px;
border-radius: 1px;
}
.game-name-box .line.left {
background: linear-gradient(90deg, rgba(39, 41, 43, 0) 0%, #27292b 100%);
margin-right: 3px;
}
.game-name-box .line.right {
background: linear-gradient(90deg, #27292b 0%, rgba(39, 41, 43, 0) 100%);
margin-left: 3px;
}
.game-name-box .game-name {
color: #27292b;
font-size: 18px;
font-weight: 600;
}
.ad-image {
margin: 39px 15px 15px;
border-radius: 8px;
width: calc(100% - 30px);
}
.share-box {
position: absolute;
z-index: 10;
right: 20px;
bottom: 40px;
padding: 10px;
}
.share-box .icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #27292b;
box-shadow: inset 0px 3px 2px 0px rgba(243, 243, 243, 0.4);
}
.share-box .icon .iconfont {
background-image: -webkit-linear-gradient(180deg, #01ffde 0%, #01fff4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px;
}
.share-box img {
position: absolute;
left: 50%;
bottom: 0;
width: 48px;
height: 16px;
transform: translateX(-50%);
z-index: 2;
}
</style>
src/views/game/cmh/index.vue
......@@ -88,6 +88,7 @@ import { api as viewerApi } from 'v-viewer';
import { cmhPage } from '@/service/api/gameApi.js';
import linksMixin from '../common/linksMixin.js';
import { formatDateTimeByType } from '@/utils/index.js';
import dmDropdown from '@/components/dm-drop-down/dm-drop-down';
export default {
mixins: [linksMixin],
......
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