1686 lines
46 KiB
Vue
1686 lines
46 KiB
Vue
<template>
|
||
<view>
|
||
<!-- <view class="guidance" v-if="guidance" :style="{'background-image':'url(/static/guidance/' + guidanceIndex + '.jpg)'}">
|
||
<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
|
||
<image src="@/static/guidance/step.png" mode="" :class="{'step0':guidanceIndex === 0,'step1':guidanceIndex === 1,'step2':guidanceIndex === 2,'step3':guidanceIndex === 3,}" v-if="guidanceIndex < 3" @click="nextStep"></image>
|
||
<image src="@/static/guidance/kown.png" mode="" class="kown-btn" v-else @click="skip"></image>
|
||
</view> -->
|
||
<!-- 新手引导 -->
|
||
<swiper class="guidance" v-show="guidance" disable-touch :current="guidanceIndex">
|
||
<swiper-item>
|
||
<view class="guidance-img guidance-img0">
|
||
<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
|
||
<image src="@/static/guidance/step.png" mode="" class="step0" @click="nextStep"></image>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="guidance-img guidance-img1">
|
||
<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
|
||
<image src="@/static/guidance/step.png" mode="" class="step1" @click="nextStep"></image>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="guidance-img guidance-img2">
|
||
<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
|
||
<image src="@/static/guidance/step.png" mode="" class="step2" @click="nextStep"></image>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="guidance-img guidance-img3">
|
||
<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
|
||
<image src="@/static/guidance/kown.png" mode="" class="kown-btn" @click="skip"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 活动内容 -->
|
||
<view class="activity-page" v-show="!guidance">
|
||
<scroll-view scroll-y="true" class="scroll-main">
|
||
<!-- <image src="@/static/rank/fh.png" mode="aspectFit" class="header-back" @click="goBack"></image> -->
|
||
<image src="@/static/activity/back.png" mode="aspectFit" class="header-back" @click="goBack"></image>
|
||
<view class="header">
|
||
<view class="rule"></view>
|
||
<view class="title">{{detailData.name}}</view>
|
||
<image src="@/static/activity/rule.png" class="rule" mode="" @click="ruleVisible = true"></image>
|
||
</view>
|
||
<view class="header-time">{{detailData.startTime}} —— {{detailData.endTime}}</view>
|
||
|
||
<view class="spine-view" :style="{left:spineLeft,top:spineTop}">
|
||
<image src="@/static/activity/gy.png" mode="aspectFit" class="person-icon"></image>
|
||
<!-- <SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" /> -->
|
||
</view>
|
||
<view class="list">
|
||
<!-- @click="getPosition(index)" -->
|
||
<view v-for="(item,index) in detailData.taskList" :key="index" :id="`list-item-${index}`" :style="getBlockStyle(index)" class="list-item">
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 排行榜 -->
|
||
<view class="rank">
|
||
<view class="rank-header">
|
||
<image src="@/static/activity/ckjl.png" class="look-draw" mode="" @click="lookDraw"></image>
|
||
<image src="@/static/activity/yyy.png" class="look-draw look-zoom" mode="" @click="lookOne" v-if="detailData.boxId"></image>
|
||
</view>
|
||
|
||
<view class="rank-list">
|
||
<view class="rank-item" v-for="(item,index) in detailData.topList" :key="index" :style="{ 'background-image': 'url(/static/activity/' + backgroundImages[index % backgroundImages.length] + ')' }">
|
||
<view class="item-name">{{index+1}}.{{item.nickname}}</view>
|
||
<view>{{Number(item.period) + 1}}轮{{Number(item.periodNum) + 1}}关</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 任务 -->
|
||
<view class="task">
|
||
<view class="task-main">
|
||
<view class="">{{Number(detailData.curPeriod) + 1}} 轮 {{Number(detailData.curPeriodNum) + 1}} 关</view>
|
||
{{detailData.curTask.description}}
|
||
</view>
|
||
<image src="@/static/activity/qwc.png" mode="aspectFit" class="accomplish-icon" @click="toComplete" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type !== 'PRODUCT_EXCHANGE' && detailData.taskList[detailData.curPeriodNum].conditions.type !== 'BOX_PURCHASE'"></image>
|
||
<view class="task-footer" :style="{'justify-content':detailData.curTask.conditions.isNormal ? 'space-between' : 'center'}" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'PRODUCT_EXCHANGE' || detailData.taskList[detailData.curPeriodNum].conditions.type === 'BOX_PURCHASE'">
|
||
<template>
|
||
<image src="@/static/activity/detail.png" mode="" class="task-footer-icon" @click="goDetail" v-if="detailData.curTask.conditions.isNormal"></image>
|
||
</template>
|
||
<image src="@/static/activity/dh.png" mode="" class="task-footer-icon" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'PRODUCT_EXCHANGE'" @click="exchangeShop"></image>
|
||
<image src="@/static/activity/buy.png" mode="" class="task-footer-icon" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'BOX_PURCHASE'" @click="buyBox"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 奖励content-frist -->
|
||
<view v-if="rewardVisible" class="reward-main">
|
||
<view class="reward">
|
||
<view class="reward-content">
|
||
<view class="content">
|
||
<view class="content-item" v-for="(item,key) in detailData.rewardsMap" :key="key" :class="{one:key== 1,two:key==2,three:key==3}">
|
||
<view class="content-item-title">第{{key}}名</view>
|
||
<scroll-view scroll-x="true" class="award">
|
||
<view class="award-item" v-for="(childItem,childIndex) in detailData.rewardsMap[key]" :key="childIndex">
|
||
<image src="@/static/activity/tg.png" mode="aspectFit" v-if="childItem.type === 'POINTS' || childItem.type === 'PROMPT'" style="width: 76rpx;height: 43rpx;"></image>
|
||
<image src="@/static/activity/yhq.png" mode="aspectFit" v-if="childItem.type === 'COUPON'" style="width: 76rpx;height: 43rpx;"></image>
|
||
<!-- <view class="coupon" v-if="childItem.type === 'COUPON'">
|
||
<template v-if="childItem.info">
|
||
<template v-if="childItem.info.type === 'REDUCTION'"><text style="font-size: 20rpx;">立减</text>{{Number(childItem.info.amount)}}</template>
|
||
<template v-if="childItem.info.type === 'DISCOUNT'">{{Number(childItem.info.amount)}}<text style="font-size: 20rpx;">折</text></template>
|
||
</template>
|
||
</view> -->
|
||
<template v-if="childItem.info.coverResource">
|
||
<image :src="childItem.info.coverResource.url" mode="aspectFit" v-if="childItem.type === 'PRODUCT'" style="width: 46rpx;height: 43rpx;"></image>
|
||
</template>
|
||
<view class="award-name" v-if="childItem.type === 'PRODUCT'">
|
||
<template v-if="childItem.info">
|
||
{{childItem.info.abbreviation}}*{{childItem.num}}
|
||
</template>
|
||
</view>
|
||
<view class="award-name" v-else-if="childItem.type === 'COUPON'">
|
||
<template v-if="childItem.info">
|
||
<template v-if="childItem.info.type === 'REDUCTION'">立减{{Number(childItem.info.amount)}}*{{childItem.num}}</template>
|
||
<template v-if="childItem.info.type === 'DISCOUNT'">{{Number(childItem.info.amount)}}折*{{childItem.num}}</template>
|
||
</template>
|
||
</view>
|
||
<view class="award-name" v-else>{{typeObj[childItem.type]}}*{{childItem.num}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image src="@/static/activity/close.png" mode="aspectFit" class="reward-close" @click="rewardVisible = false"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 规则 -->
|
||
<view v-if="ruleVisible" class="reward-main">
|
||
<view class="reward">
|
||
<view class="rule-content">
|
||
<scroll-view class="content ql-snow" scroll-y="true" scroll-with-animation>
|
||
<rich-text :nodes="detailData.rule" class="ql-editor"></rich-text>
|
||
</scroll-view>
|
||
</view>
|
||
<image src="@/static/activity/close.png" mode="aspectFit" class="reward-close" @click="ruleVisible = false"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 购买盲盒 -->
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" z-index="999" :maskCloseAble="false" closeable>
|
||
<BuyBoxCom :detailData="detailBoxData" @payStatus="payStatus" @isOk="buySuccess" :boxType="boxType" :payNum="payNum" :isActivityReport="true" isActivity="runActivity" :curTaskId="detailData.id" :activityId="`_${detailData.id}_${detailData.curTask.id}`" :activityType="detailData.curTask.conditions.countType" :isNormal="detailData.curTask.conditions.isNormal"></BuyBoxCom>
|
||
</popup-view>
|
||
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
|
||
|
||
|
||
<popup-view v-model="shopShow" mode="bottom" border-radius="15" z-index="999">
|
||
<view class="popup-main">
|
||
<view class="address">
|
||
<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
|
||
</image>
|
||
<view class="name">选择收货地址，让快递到家~</view>
|
||
</view>
|
||
</view>
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<view class="detail" @click="selectAddress" v-else>
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
|
||
</image>
|
||
<view class="name">{{address.receiver}}</view>
|
||
<view class="phone">{{address.phone}}</view>
|
||
</view>
|
||
<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
|
||
{{address.address}}</view>
|
||
</view>
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<!-- <image src="" mode="aspectFit" class="edit-icon"></image> -->
|
||
</view>
|
||
<view class="popup-header">
|
||
<image :src="detailShopData.coverResource.url" mode="" class="popup-header-img" v-if="detailShopData.coverResource"></image>
|
||
<view class="popup-info">
|
||
<view class="popup-info-name">{{detailShopData.name}}</view>
|
||
<view class="popup-info-price">
|
||
<view class="popup-info-price-left">
|
||
<view class="popup-clover">
|
||
<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
|
||
{{detailShopData.mallPoint}}
|
||
</view>
|
||
|
||
<view class="popup-price">
|
||
<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
|
||
</view>
|
||
</view>
|
||
<view class="operation">
|
||
<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
|
||
<view class="operation-num">1</view>
|
||
<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<view class="label">邮费</view>
|
||
<view class="value">{{Number(previewData.deliveryFee)}}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view>实际支付</view>
|
||
<view>
|
||
<text>{{previewData.points}} 积分</text>
|
||
<text style="margin-left: 10rpx;"
|
||
v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mains" v-if="payList.length > 0 && previewData.deliveryFee > 0">
|
||
<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="left">
|
||
<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="agreement" @click="agreementVisible = !agreementVisible">
|
||
<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
|
||
我已满18岁，已阅读并同意
|
||
<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="now-buy" @click="confirmBuy">
|
||
立即支付
|
||
<text>{{previewData.points}} 积分</text>
|
||
<text style="margin-left: 20rpx;"
|
||
v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
|
||
<template v-if="isPayShopDlgVisible">
|
||
<isPayDlgVue @isOk="isPayShopStatus" @isCancel="isShopCancelCk" v-if="isPayShopDlgVisible" @againPay="againShopPay"></isPayDlgVue>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import SpineCom from '@/pages/components/spine.vue'
|
||
import { activityDetailNewApi,pointClearApi,boxesDetail,boxOrderPaidApi,orderPaidApi,activityTaskAwardApi,activityGuideApi,setActivityGuideApi } from '@/API/index.js'
|
||
import {
|
||
productDetailApi,
|
||
favorItemApi,
|
||
delFavorItemApi
|
||
} from '@/API/product.js'
|
||
import {
|
||
orderPreview,
|
||
createShopOrder
|
||
} from '@/API/order.js'
|
||
import {
|
||
userAddress
|
||
} from '@/API/user.js'
|
||
import BuyBoxCom from './components/buyBoxRun.vue'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
import '@/static/quill.snow.css'
|
||
import reportClickFn from '@/utils/report.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
agreementVisible:false,
|
||
backgroundImages: ['rank-1.png', 'rank-2.png', 'rank-3.png', 'rank-4.png'],
|
||
spineLeft: "0rpx",
|
||
spineTop: '0rpx',
|
||
detailData:{
|
||
curNum: 0,
|
||
curPeriod: 0,
|
||
curPeriodNum: 0,
|
||
curTask: {},
|
||
endTime: "",
|
||
id: "",
|
||
name: "",
|
||
rewardsMap: {},
|
||
rule: "",
|
||
startTime: "",
|
||
taskList: [],
|
||
topList: [],
|
||
},
|
||
rewardVisible: false,
|
||
ruleVisible:false,
|
||
typeObj:{
|
||
POINTS:'积分',
|
||
COUPON:'优惠券',
|
||
PROMPT:'提示卡'
|
||
},
|
||
couponObj:{
|
||
'REDUCTION':"立减",
|
||
'DISCOUNT':"折扣"
|
||
},
|
||
// 盲盒相关
|
||
show:false,
|
||
boxType:'buy',
|
||
detailBoxData:{},
|
||
isPayDlgVisible:false,
|
||
paidData:{},//用于支付轮训参数
|
||
payNum:0,
|
||
// 盲盒相关结束
|
||
// 商城相关
|
||
shopShow:false,
|
||
address:{},
|
||
detailShopData:{},
|
||
previewData:{},
|
||
payList:[],
|
||
payType: '',
|
||
timer:null,
|
||
isBtnStatus:false,
|
||
orderNo:'',
|
||
isPayShopDlgVisible:false,
|
||
// 商城相关结束
|
||
isPayBtn:false,
|
||
guidance:false,//新手引导
|
||
guidanceIndex:0,
|
||
guidanceImageData:{
|
||
'0':'',
|
||
'1':'',
|
||
'2':'',
|
||
'3':'',
|
||
'4':'',
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
SpineCom,
|
||
BuyBoxCom,
|
||
isPayDlgVue
|
||
},
|
||
onShow() {
|
||
this.getActivityDetail()
|
||
},
|
||
onLoad() {
|
||
this.getActivityGuide()
|
||
uni.$on('backAddressParams', params => {
|
||
if (params.id) {
|
||
this.address = params
|
||
this.getOrderPreview()
|
||
}
|
||
});
|
||
// setTimeout(() => {
|
||
// console.log(this.list)
|
||
// this.spineLeft = this.list[0].left + '0px'
|
||
// this.spineTop = this.list[0].top + '0px'
|
||
// })
|
||
},
|
||
methods: {
|
||
|
||
// 用户协议 隐私政策
|
||
agreementCk(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/${type}`
|
||
})
|
||
},
|
||
getActivityGuide(){
|
||
activityGuideApi().then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
this.guidance = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
this.guidance = false
|
||
})
|
||
},
|
||
// 跳过新手引导
|
||
skip(){
|
||
setActivityGuideApi({status:false}).then(res => {
|
||
if(res.code === 200){
|
||
this.guidance = false
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
|
||
},
|
||
// 下一步
|
||
nextStep(){
|
||
if(this.guidanceIndex < 3){
|
||
this.guidanceIndex += 1
|
||
}
|
||
},
|
||
goPage(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/nonage`
|
||
})
|
||
},
|
||
// 商城相关
|
||
// 选择地址
|
||
selectAddress() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/address?type=select`
|
||
})
|
||
},
|
||
// 获取地址列表
|
||
getAddress() {
|
||
uni.showLoading()
|
||
userAddress({
|
||
page: 1,
|
||
size: 10
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
res.data.content.forEach(item => {
|
||
if (item.isDefault === 1) {
|
||
this.address = item
|
||
}
|
||
})
|
||
// this.getDetail()
|
||
this.getOrderPreview()
|
||
// this.getUserInfo()
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 获取商品详情
|
||
getShopDetail(id) {
|
||
uni.showLoading()
|
||
let header = {}
|
||
productDetailApi({
|
||
id
|
||
}, header).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
// res.data.rollingImagesResource.unshift(res.data.coverResource)
|
||
this.detailShopData = res.data
|
||
this.getAddress()
|
||
this.shopShow = true
|
||
// 兑换预览埋点
|
||
reportClickFn('product_detail_preview_clk')
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
getOrderPreview() {
|
||
uni.showLoading()
|
||
orderPreview({
|
||
productId: this.detailShopData.id,
|
||
quantity: 1,
|
||
userAddressId: this.address.id ? this.address.id : ''
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
this.previewData = res.data
|
||
|
||
this.payList = []
|
||
this.previewData.methods.forEach(item => {
|
||
let objToAdd = null;
|
||
if (item === 'ALIPAY') {
|
||
objToAdd = {
|
||
label: '支付宝支付',
|
||
type: 'ALIPAY',
|
||
visible: false,
|
||
height: '30rpx',
|
||
width: '30rpx',
|
||
img: '../../static/new/pay/zfb.png',
|
||
};
|
||
} else if (item === 'WECHAT') {
|
||
objToAdd = {
|
||
label: '微信支付',
|
||
type: 'WECHAT',
|
||
visible: false,
|
||
width: '34rpx',
|
||
height: '29rpx',
|
||
img: '../../static/new/pay/wx.png',
|
||
};
|
||
} else if (item === 'POINTS') {
|
||
objToAdd = {
|
||
label: "积分支付",
|
||
type: 'POINTS',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
};
|
||
} else if (item === 'NONE') {
|
||
objToAdd = {
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
} else if (item === 'COIN') {
|
||
objToAdd = {
|
||
label: "代币支付",
|
||
type: 'COIN',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
}
|
||
// 只有在objToAdd被赋值的情况下才添加到payList
|
||
if (objToAdd) {
|
||
if (objToAdd.type === 'ALIPAY') {
|
||
// 如果是WECHAT类型，则先添加到数组第一位
|
||
this.payList.unshift(objToAdd);
|
||
} else {
|
||
// 其他类型添加到数组末尾
|
||
this.payList.push(objToAdd);
|
||
}
|
||
}
|
||
});
|
||
this.payList[0].visible = true
|
||
this.payType = this.payList[0].type
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
|
||
// 减
|
||
sub() {
|
||
return
|
||
if (this.quantity === 1) {
|
||
this.$api.msg("不能小于1！");
|
||
return;
|
||
}
|
||
if (this.quantity > 1) {
|
||
this.quantity--
|
||
}
|
||
this.getOrderPreview()
|
||
},
|
||
// 加
|
||
add() {
|
||
return
|
||
this.quantity++
|
||
this.getOrderPreview()
|
||
},
|
||
|
||
// 确认购买
|
||
confirmBuy() {
|
||
if(this.isPayBtn){
|
||
return
|
||
}
|
||
this.isPayBtn = true
|
||
setTimeout(()=>{
|
||
this.isPayBtn = false;
|
||
}, 2000);
|
||
if(!this.agreementVisible){
|
||
this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
|
||
return
|
||
}
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
if(this.isBtnStatus){
|
||
return
|
||
}
|
||
this.isBtnStatus = true
|
||
setTimeout(()=>{
|
||
this.isBtnStatus = false;
|
||
}, 2000);
|
||
if (JSON.stringify(this.address) === '{}') {
|
||
this.$api.msg('请选择地址')
|
||
return
|
||
}
|
||
let data = {
|
||
productId: this.detailShopData.id,
|
||
userAddressId: this.address.id,
|
||
// method: this.payType,
|
||
method: 'POINTS',
|
||
methodCarriage: this.payType,
|
||
quantity: this.quantity,
|
||
source:'ACTIVITY_EXCHANGE'
|
||
}
|
||
// uni.showLoading()
|
||
createShopOrder(data).then(res => {
|
||
if (res.code === 200) {
|
||
// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
|
||
// window.location.href = res.data.payParams.payinfo
|
||
// }
|
||
if (res.data.payParams.payinfo) {
|
||
window.location.href = res.data.payParams.payinfo
|
||
}
|
||
reportClickFn(`activity_pay_clk_${this.detailData.id}_${this.detailData.curTask.id}`)
|
||
this.orderNo = res.data.no
|
||
this.isPayShopDlgVisible = true
|
||
this.getOrderPaid(res.data.no)
|
||
let clearTime = 0
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
clearTime += 3
|
||
if (clearTime == 30) {
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
// this.$api.msg("未查询到支付结果")
|
||
}
|
||
}, 3000);
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
|
||
getOrderPaid(no,types) {
|
||
orderPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
// 实际兑换埋点
|
||
reportClickFn('product_detail_ preview_pay_clk')
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
this.isPayShopDlgVisible = false
|
||
uni.navigateTo({
|
||
url: `/pages/shop/paySuccess?no=${no}&price=${this.previewData.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
|
||
})
|
||
this.shopShow = false
|
||
uni.hideLoading()
|
||
}else{
|
||
if(types === 'click'){
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
isPayShopStatus(){
|
||
this.getOrderPaid(this.orderNo,'click')
|
||
},
|
||
isShopCancelCk(){
|
||
this.isPayShopDlgVisible = false
|
||
},
|
||
againShopPay(){
|
||
this.confirmBuy()
|
||
},
|
||
// 商城相关结束
|
||
isPayStatus(){
|
||
boxOrderPaidApi({
|
||
no:this.paidData.no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${this.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}&isActivity=runActivity`
|
||
})
|
||
uni.hideLoading()
|
||
}else{
|
||
this.$api.msg('未查询到支付结果')
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
|
||
againPay(){
|
||
this.payNum += 1
|
||
},
|
||
getBoxDetail(id){
|
||
boxesDetail({
|
||
id
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailBoxData = res.data
|
||
this.show = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 购买弹框回传回来的方法 用于是否打开是否支付弹框
|
||
payStatus(val){
|
||
this.isPayDlgVisible = true
|
||
console.log(val)
|
||
this.paidData = val
|
||
},
|
||
|
||
// 购买成功
|
||
buySuccess() {
|
||
this.isPayDlgVisible = false
|
||
this.show = false
|
||
},
|
||
goBack(){
|
||
uni.switchTab({
|
||
url:`/pages/index/new-index`
|
||
})
|
||
},
|
||
exchangeShop(){
|
||
if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
|
||
reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
|
||
// 商品兑换
|
||
this.getShopDetail(this.detailData.curTask.conditions.productId)
|
||
// uni.navigateTo({
|
||
// url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
|
||
// })
|
||
}
|
||
},
|
||
buyBox(){
|
||
if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
|
||
console.log("this.detailData.curTask.conditions.boxId:",this.detailData.curTask.conditions.boxId)
|
||
reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
|
||
if(this.detailData.curTask.conditions.isNormal){
|
||
this.getBoxDetail(this.detailData.curTask.conditions.boxId)
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}&cellBuy=active&isNo=active&curTaskId=${this.detailData.id}&activityId=_${this.detailData.id}_${this.detailData.curTask.id}&activityType=${this.detailData.curTask.conditions.countType}&isNormal=${this.detailData.curTask.conditions.isNormal}`
|
||
})
|
||
}
|
||
|
||
|
||
// 盲盒购买
|
||
// uni.navigateTo({
|
||
// url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
|
||
// })
|
||
}
|
||
|
||
},
|
||
lookOne(){
|
||
uni.navigateTo({
|
||
url:`/pages/index/boxDetail?id=${this.detailData.boxId}&isNo=active`
|
||
})
|
||
},
|
||
goDetail(){
|
||
if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
|
||
// 盲盒购买
|
||
if(this.detailData.boxId){
|
||
uni.navigateTo({
|
||
url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}&isNo=active`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
|
||
})
|
||
}
|
||
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
|
||
// 商品兑换
|
||
uni.navigateTo({
|
||
url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
|
||
})
|
||
}
|
||
},
|
||
// 去完成
|
||
toComplete(){
|
||
reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
|
||
if(this.detailData.curTask.conditions.type === "POINT_CLEAR"){
|
||
// 清除积分
|
||
uni.showLoading({
|
||
mask:true
|
||
})
|
||
pointClearApi({points:this.detailData.curTask.conditions.points}).then(res => {
|
||
this.$api.msg(res.message)
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.getActivityDetail()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
|
||
console.log("this.detailData.curTask.conditions.boxId:",this.detailData.curTask.conditions.boxId)
|
||
this.getBoxDetail(this.detailData.curTask.conditions.boxId)
|
||
|
||
// 盲盒购买
|
||
// uni.navigateTo({
|
||
// url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
|
||
// })
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
|
||
// 商品兑换
|
||
this.getShopDetail(this.detailData.curTask.conditions.productId)
|
||
// uni.navigateTo({
|
||
// url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
|
||
// })
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "PROMPT_PURCHASE"){
|
||
// 提示卡购买
|
||
uni.navigateTo({
|
||
url:`/pages/index/card?activity=activity`
|
||
})
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "COUPON_AWARD" || this.detailData.curTask.conditions.type === "POINT_AWARD"){
|
||
// 提示卡购买
|
||
uni.showLoading({
|
||
mask:true
|
||
})
|
||
activityTaskAwardApi().then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
if(this.detailData.curTask.conditions.type === "POINT_AWARD"){
|
||
this.$api.msg(`获得积分${res.data.points}`)
|
||
}
|
||
if(this.detailData.curTask.conditions.type === "COUPON_AWARD"){
|
||
this.$api.msg(`获得优惠券：${res.data.name}*${res.data.num}`)
|
||
}
|
||
this.getActivityDetail()
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
|
||
}).catch(errr => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
//
|
||
},
|
||
lookDraw(){
|
||
this.rewardVisible = true
|
||
},
|
||
getActivityDetail(){
|
||
activityDetailNewApi().then(res => {
|
||
if(res.code === 200){
|
||
this.detailData = JSON.parse(JSON.stringify(res.data))
|
||
// this.detailData.rewardsMap = this.transformedData(this.detailData.rewardsMap)
|
||
setTimeout(() => {
|
||
this.spineLeft = this.detailData.taskList[this.detailData.curPeriodNum].left + 'px'
|
||
this.spineTop = this.detailData.taskList[this.detailData.curPeriodNum].top + 'px'
|
||
})
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
},
|
||
transformedData(data) {
|
||
let result = {};
|
||
let prevKey = null;
|
||
|
||
for (let key in data) {
|
||
const numericKey = parseInt(key, 10);
|
||
|
||
if (numericKey <= 3) {
|
||
result[key] = data[key];
|
||
} else {
|
||
if (prevKey !== null) {
|
||
let newKey = `${prevKey + 1}-${key}`;
|
||
result[newKey] = data[key];
|
||
} else {
|
||
result[key] = data[key];
|
||
}
|
||
}
|
||
|
||
prevKey = numericKey;
|
||
}
|
||
|
||
return result;
|
||
},
|
||
getBlockStyle(index) {
|
||
console.log(index)
|
||
const cols = 3;
|
||
const windowWidth = window.innerWidth;
|
||
const elWidth = 130;
|
||
const elHeight = 126;
|
||
|
||
const spaceX = (windowWidth - (elWidth * cols)) / (cols + 1);
|
||
|
||
const startX = spaceX;
|
||
const startY = 0;
|
||
|
||
const rowList = [
|
||
0, 0, 0,
|
||
1,
|
||
2,
|
||
3, 3, 3,
|
||
4,
|
||
5,
|
||
]
|
||
const offset = Math.floor(index / rowList.length) * 6;
|
||
const row = rowList[index % rowList.length] + offset;
|
||
|
||
const colList = [
|
||
0, 1, 2,
|
||
2,
|
||
2,
|
||
2, 1, 0,
|
||
0,
|
||
0,
|
||
]
|
||
const col = colList[index % colList.length]
|
||
|
||
let left = (col * elWidth) + (col * spaceX);
|
||
let top = startY + (elHeight * row);
|
||
|
||
this.$set(this.detailData.taskList[index], 'left', left+10)
|
||
this.$set(this.detailData.taskList[index], 'top', top +90)
|
||
// this.$set(this.detailData.taskList[index], 'top', top*2+10)
|
||
return {
|
||
left: left + "px",
|
||
top: top + "px",
|
||
backgroundImage:`url('/static/activity/${this.detailData.taskList[index].style}.png')`
|
||
}
|
||
},
|
||
getViewPosition(index) {
|
||
// 获取元素
|
||
var element = document.getElementById(`list-item-${index}`);
|
||
|
||
// 获取元素的边界矩形
|
||
var rect = element.getBoundingClientRect();
|
||
|
||
// 获取页面的滚动偏移
|
||
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
||
// 计算元素相对于整个文档的 x 和 y 轴位置
|
||
var x = rect.left + scrollLeft;
|
||
var y = rect.top + scrollTop;
|
||
|
||
console.log("页面中X轴位置: " + x);
|
||
console.log("页面中Y轴位置: " + y);
|
||
|
||
},
|
||
getPosition(index) {
|
||
// console.log(this.list[index].left,this.list[index].top)
|
||
// setTimeout(() => {
|
||
// // this.leftTop(this.list[index].left + "px",this.list[index].top + "px")
|
||
// },1000)
|
||
|
||
this.spineLeft = this.list[index].left + 'px'
|
||
this.spineTop = this.list[index].top + 'px'
|
||
console.log("this.spineLeft:", this.spineLeft)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.guidance{
|
||
height: 100vh;
|
||
|
||
.guidance-img{
|
||
height: 100vh;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
.skip-btn{
|
||
width: 158rpx;
|
||
height: 109rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.kown-btn{
|
||
position: absolute;
|
||
width: 335rpx;
|
||
height: 100rpx;
|
||
left: 209rpx;
|
||
top: 1074rpx;
|
||
// bottom: 160rpx;
|
||
}
|
||
.step0{
|
||
position: absolute;
|
||
width: 335rpx;
|
||
height: 100rpx;
|
||
left: 209rpx;
|
||
top: 953rpx;
|
||
}
|
||
.step1{
|
||
position: absolute;
|
||
width: 335rpx;
|
||
height: 100rpx;
|
||
left: 209rpx;
|
||
top: 880rpx;
|
||
}
|
||
.step2{
|
||
position: absolute;
|
||
width: 335rpx;
|
||
height: 100rpx;
|
||
left: 209rpx;
|
||
top: 1293rpx;
|
||
}
|
||
.step3{
|
||
position: absolute;
|
||
width: 335rpx;
|
||
height: 100rpx;
|
||
left: 209rpx;
|
||
top: 1074rpx;
|
||
}
|
||
}
|
||
.guidance-img0{
|
||
background-image: url('@/static/guidance/0.jpg');
|
||
}
|
||
.guidance-img1{
|
||
background-image: url('@/static/guidance/1.jpg');
|
||
}
|
||
.guidance-img2{
|
||
background-image: url('@/static/guidance/2.jpg');
|
||
}
|
||
.guidance-img3{
|
||
background-image: url('@/static/guidance/3.jpg');
|
||
}
|
||
|
||
}
|
||
.activity-page {
|
||
height: 100vh;
|
||
width: 100%;
|
||
background-image: url('@/static/activity/bg.jpg');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.header-back {
|
||
width: 80rpx;
|
||
height: 85rpx;
|
||
// width: 40rpx;
|
||
// height: 45rpx;
|
||
position: fixed;
|
||
top: 20rpx;
|
||
left: 30rpx;
|
||
z-index: 390;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 21rpx 0 21rpx;
|
||
|
||
.rule {
|
||
width: 117rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.title {
|
||
width: 435rpx;
|
||
height: 84rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 38rpx;
|
||
color: #EDDDA9;
|
||
background-image: url('@/static/activity/title.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
|
||
.header-time {
|
||
width: 100%;
|
||
height: 32rpx;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #EDDDA9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.scroll-main {
|
||
padding-top: 20rpx;
|
||
height: 100vh;
|
||
// height: calc(100vh - 190rpx);
|
||
position: relative;
|
||
// margin-left: 52rpx;
|
||
|
||
.list {
|
||
// padding-left: 52rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-top: 60rpx;
|
||
margin-left: 32rpx;
|
||
|
||
.list-item {
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 193rpx;
|
||
height: 186rpx;
|
||
background-image: url('@/static/activity/goupeng.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.list-item:first-child {
|
||
background-image: url('@/static/activity/frist.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.list-item:last-child {
|
||
background-image: url('@/static/activity/last.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
.rank{
|
||
position: absolute;
|
||
top: 410rpx;
|
||
// top: 250rpx;
|
||
left: 10rpx;
|
||
width: 496rpx;
|
||
height: 470rpx;
|
||
background-image: url('@/static/activity/phb.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 100rpx;
|
||
padding: 100rpx 39rpx 0 39rpx;
|
||
.rank-header{
|
||
width: 416rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
top: 33rpx;
|
||
left: 40rpx;
|
||
.look-draw{
|
||
width: 117rpx;
|
||
height: 57rpx;
|
||
}
|
||
.look-zoom{
|
||
animation: zoomAnimation 1s infinite alternate;
|
||
}
|
||
@keyframes zoomAnimation {
|
||
0% {
|
||
transform: scale(1); /* 初始状态，原始大小 */
|
||
}
|
||
100% {
|
||
transform: scale(1.3); /* 回到原始大小 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.rank-list{
|
||
height: 310rpx;
|
||
overflow-y: scroll;
|
||
.rank-item{
|
||
width: 100%;
|
||
height: 78rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 4rpx;
|
||
padding: 0 27rpx 0 16rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFAEB;
|
||
.item-name{
|
||
width: 155rpx;
|
||
height: 43rpx;
|
||
line-height: 43rpx;
|
||
background-color: rgba(0,0,0,0.3);
|
||
border-radius: 20rpx;
|
||
padding: 0 10rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.task{
|
||
position: absolute;
|
||
top: 1170rpx;
|
||
// top: 930rpx;
|
||
left: 270rpx;
|
||
width: 473rpx;
|
||
height: 301rpx;
|
||
background-image: url('@/static/activity/task.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
padding-top: 20rpx;
|
||
.task-main{
|
||
width: 100%;
|
||
height: 160rpx;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #FFFAEB;
|
||
line-height: 54rpx;
|
||
padding: 0rpx 30rpx 10rpx 30rpx;
|
||
overflow-y: auto;
|
||
}
|
||
.accomplish-icon{
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
width: 234rpx;
|
||
height: 78rpx;
|
||
}
|
||
.task-footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
.task-footer-icon{
|
||
width: 186rpx;
|
||
height: 78rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.spine-view {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
pointer-events: none;
|
||
z-index: 100;
|
||
position: absolute;
|
||
transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
|
||
.person-icon{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
animation: slide 0.5s infinite alternate linear;
|
||
// border: 1px solid red;
|
||
}
|
||
@keyframes slide {
|
||
0% {
|
||
transform: rotate(-5deg); /* 动画开始时倾斜度数 */
|
||
}
|
||
100% {
|
||
transform: rotate(5deg); /* 动画结束时倾斜度数 */
|
||
}
|
||
}
|
||
}
|
||
.reward-main{
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.3);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
z-index: 9999;
|
||
.reward{
|
||
|
||
.reward-content{
|
||
width: 591rpx;
|
||
height: 679rpx;
|
||
background-image: url('@/static/activity/jl.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 100rpx;
|
||
.content{
|
||
margin-left: 46rpx;
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
overflow-y: auto;
|
||
.content-item{
|
||
width: 462rpx;
|
||
height: 134rpx;
|
||
background-image: url('@/static/activity/jl-4.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin: 0 auto;
|
||
margin-bottom: 1rpx;
|
||
.content-item-title{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding-top: 6rpx;
|
||
}
|
||
.award{
|
||
margin-left: 20rpx;
|
||
width: 422rpx;
|
||
white-space: nowrap;
|
||
padding-top: 10rpx;
|
||
// display: flex;
|
||
|
||
.award-item{
|
||
display: inline-block;
|
||
width: 131rpx;
|
||
height: 76rpx;
|
||
margin-right: 34rpx;
|
||
text-align: center;
|
||
.award-name{
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #FFFCF0;
|
||
margin-top: -10rpx;
|
||
width: 131rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.coupon{
|
||
width: 100rpx;
|
||
height: 43rpx;
|
||
line-height: 43rpx;
|
||
background-image: url('@/static/activity/yhq.png');
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
font-size: 26rpx;
|
||
color: #E9FF7A;
|
||
text-align: center;
|
||
border: 1px solid pink;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.one{
|
||
background-image: url('@/static/activity/jl-1.png');
|
||
}
|
||
.two{
|
||
background-image: url('@/static/activity/jl-2.png');
|
||
}
|
||
.three{
|
||
background-image: url('@/static/activity/jl-3.png');
|
||
}
|
||
.content-frist{
|
||
background-image: url('@/static/activity/jl-1.png');
|
||
}
|
||
}
|
||
}
|
||
.rule-content{
|
||
width: 591rpx;
|
||
height: 679rpx;
|
||
background-image: url('@/static/activity/gz.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 100rpx;
|
||
.content{
|
||
margin-left: 46rpx;
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
.reward-close{
|
||
margin: 0 auto;
|
||
margin-top: 24rpx;
|
||
display: block;
|
||
width: 103rpx;
|
||
height: 109rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
.popup-main {
|
||
padding: 30rpx 22rpx;
|
||
// padding: 32rpx 32rpx 0rpx 32rpx;
|
||
z-index: 9991;
|
||
|
||
// max-height: 900rpx;
|
||
// position: relative;
|
||
.address {
|
||
// width: 686rpx;
|
||
width: 100%;
|
||
// background: #FFFFFF;
|
||
// border-radius: 8rpx;
|
||
// padding: 24rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 18rpx;
|
||
|
||
.detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.address-info {
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-icon {
|
||
width: 30rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
// max-width: 250rpx;
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
}
|
||
|
||
.phone {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.address-detail {
|
||
width: 600rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.arr-icon {
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.edit-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 158rpx;
|
||
|
||
.popup-header-img {
|
||
width: 158rpx;
|
||
height: 158rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.popup-info {
|
||
margin-left: 25rpx;
|
||
width: 500rpx;
|
||
|
||
.popup-info-name {
|
||
|
||
width: 482rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-info-price {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.popup-info-price-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.popup-price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 300;
|
||
font-size: 16rpx;
|
||
color: #888888;
|
||
margin-left: 20rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding-bottom: 8rpx;
|
||
text-decoration: line-through;
|
||
|
||
.popup-symbol {
|
||
// font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.popup-clover {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 42rpx;
|
||
color: #000000;
|
||
height: 50rpx;
|
||
|
||
.clover-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operation {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 144rpx;
|
||
height: 48rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.subs {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
}
|
||
|
||
.operation-num {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
border-top: 2rpx solid #E6E6E6;
|
||
border-bottom: 2rpx solid #E6E6E6;
|
||
}
|
||
|
||
.add {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 685rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-title {
|
||
color: #333333;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
margin-top: 48rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.specification-list {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// flex-wrap: wrap;
|
||
|
||
width: 100%;
|
||
max-height: 600rpx;
|
||
margin-bottom: 50rpx;
|
||
padding-bottom: 220rpx;
|
||
overflow-y: auto;
|
||
|
||
.specification-item {
|
||
z-index: 9999;
|
||
display: inline-block;
|
||
padding: 0 64rpx;
|
||
// width: 200rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
border: 2rpx solid #B3B3BE;
|
||
border-radius: 28rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #B3B3BE;
|
||
margin-right: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.specification-item-active {
|
||
border: 2rpx solid #333333;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
// padding-bottom: 20rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.footer-num {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
z-index: 9999;
|
||
margin-top: 20rpx;
|
||
|
||
.footer-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
|
||
.footer-info-num {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.item-step {
|
||
margin-top: 17rpx;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-sub {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
|
||
.item-num {
|
||
width: 78rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.item-add {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.now-buy {
|
||
z-index: 9999;
|
||
margin-top: 26rpx;
|
||
|
||
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.agreement{
|
||
// margin: 40rpx;
|
||
width: 670rpx;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 46rpx;
|
||
.agreement-icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.agreement-color{
|
||
color: #0080FF;
|
||
}
|
||
}
|
||
</style> |