1134 lines
26 KiB
Vue
1134 lines
26 KiB
Vue
<template>
|
||
<view class="content" :style="'background: url('+ z_imgPath + '/ka_bg.png'+ ') repeat 0 0 / 100% 100%;'">
|
||
|
||
<view class="head">
|
||
<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
|
||
<view class="header_title">
|
||
<view @click="back()">
|
||
<image :src="z_imgPath + 'back.png'"></image>返回
|
||
</view>
|
||
<view class="hang1">抽卡机 </view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ka_title">
|
||
<view>
|
||
<view>{{goods.title}} </view>
|
||
<view style="font-size: 24rpx;"><text>{{goods.price}}</text> </view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="gonggao" :style="goods.card_notice?'border: 2rpx solid #FFFFFF;':''" v-if="goods.card_notice">
|
||
<uni-notice-bar :single="true" :speed="50" color="#ffffff" :scrollable="true" :text="goods.card_notice"
|
||
backgroundColor="rgba(0,0,0,0)"></uni-notice-bar>
|
||
|
||
</view>
|
||
|
||
<view class="box" :style="'background: url(' + z_imgPath + '/ka_item_bg.png' + ') repeat 0 0 / 100% 100%;'">
|
||
<view :style="'background: url('+ goods.imgurl_detail+ ') repeat 0 0 / 100% 100%;'">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<view :style="'background: url('+z_imgPath + 'btn_l.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
@click="choujiang('left_count')">
|
||
{{card_set.left_title}}
|
||
<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
v-if="card_set.left_notice">
|
||
{{card_set.left_notice}}
|
||
</view>
|
||
</view>
|
||
<view :style="'background: url('+ z_imgPath + 'btn_r.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
@click="choujiang('right_count')">
|
||
{{card_set.right_title}}
|
||
<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
v-if="card_set.right_notice">
|
||
{{card_set.right_notice}}
|
||
</view>
|
||
</view>
|
||
<view :style="'background: url('+ z_imgPath + 'btn_c.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
@click="choujiang('center_count')">
|
||
{{card_set.center_title}}
|
||
<view :style="'background: url('+ z_imgPath + 'pop.png'+ ') repeat 0 0 / 100% 100%;'"
|
||
v-if="card_set.center_notice">
|
||
{{card_set.center_notice}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="xuanfu">
|
||
<image :src="z_imgPath + 'jilv.png'" @click="getjilv()"></image>
|
||
<image :src="z_imgPath + 'tujian.png?1'" @click="getTujian()"></image>
|
||
<image :src="z_imgPath + 'guize.png'" @click="$refs.shuoming.open()"></image>
|
||
<image :src="z_imgPath + 'kace.png'" @click="gotoPage('/pages/chouka/detail?goods_id=' + goods.id)">
|
||
</image>
|
||
<image :src="z_imgPath + 'kefu.png'" @click="tokefu()"></image>
|
||
</view>
|
||
|
||
<uni-popup ref="shuoming" type="center">
|
||
<view class="pop" :style="'background: url('+ z_imgPath + 'gz_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
||
<view class="pop_con">
|
||
<scroll-view scroll-y="true" style="height: 440rpx;">
|
||
<view v-html="news"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 确认订单 -->
|
||
<uni-popup ref="order_show" type="bottom" :isMaskClick="false">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<image :src="z_imgPath + 'order_p.png'"></image>
|
||
<view class="ca" @click="$refs.order_show.close()">×</view>
|
||
</view>
|
||
<view class="order_title_con1">
|
||
<view class="order_pic" v-if="pay_news.goods">
|
||
<view class="order_pic_img">
|
||
<image :src="pay_news.goods.imgurl_detail"></image>
|
||
</view>
|
||
<view>
|
||
<view style="font-size: 35rpx;">{{pay_news.goods.title}}</view>
|
||
<view style="margin-top: 40rpx;">类型：1包</view>
|
||
<view style="margin-top: 10rpx;">
|
||
<text>单价：<text style="color: ;">{{pay_news.goods.price}}元</text></text>
|
||
<text>×{{pay_news.goods.prize_num}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_num">
|
||
<view style="font-size: 28rpx;" v-if="pay_news.goods">数量：{{pay_news.goods.prize_num}}张</view>
|
||
<view>
|
||
小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_title_con1" v-if="goods.box_type!=1">
|
||
<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
|
||
<view class="fangshi" @click="change_yuan_index(1)" v-if="goods.type != 3">
|
||
<view class="flex_center">
|
||
<image :src="z_imgPath+'bi.png'"></image>
|
||
<view>
|
||
使用星钻抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
|
||
</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'yuan'+ (bi?'_sel':'') +'.png'"></image>
|
||
</view>
|
||
<view class="fangshi" @click="change_yuan_index(2)">
|
||
<view class="flex_center">
|
||
<image :src="z_imgPath + 'yue.png'"></image>
|
||
<view>
|
||
使用星钻抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
|
||
</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'yuan'+ (yue?'_sel':'') +'.png'"></image>
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 24rpx;margin:20rpx 10rpx;">
|
||
下单购买即表示同意
|
||
<text style="color: #FF7514;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
|
||
</view>
|
||
<view class="order_title_btn">
|
||
<view>
|
||
总计:{{goods.box_type==5?'':'￥'}}<text
|
||
style="font-size: 40rpx;">{{pay_news.price}}{{goods.box_type==5?'积分':''}}</text>
|
||
</view>
|
||
<view class="zhifu" @click="pay()">确定支付</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 抽卡记录 -->
|
||
<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<image :src="z_imgPath + 'ckjl_p.png'"></image>
|
||
<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
|
||
</view>
|
||
<view class="jilv_title">
|
||
<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)"
|
||
:style="shang_id==item.id?'background:#FF7514':''">
|
||
<text>{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height: 900rpx;">
|
||
<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
|
||
<view>
|
||
<view class="flex_center ">
|
||
<image :src="item.user_info.headimg"></image>
|
||
<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}</view>
|
||
</view>
|
||
<view style="font-size: 24rpx;">{{item.addtime}}</view>
|
||
</view>
|
||
<view>
|
||
<view class="flex_center">
|
||
<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
|
||
<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
|
||
</view>
|
||
<view>X{{item.prize_num}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 图鉴 -->
|
||
<uni-popup ref="tujian" type="bottom" :isMaskClick="false">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<image :src="z_imgPath + 'tujian_p.png'"></image>
|
||
<view class="ca" @click="$refs.tujian.close(),page_num_t=1,mixTotal_t=0">×</view>
|
||
</view>
|
||
<view class="jilv_title">
|
||
<view v-for="(item,index) in tujian_cate" :key="index" @click="change_tujian(item.id)"
|
||
:style="tujian_id==item.id?'background:#FF7514':''">
|
||
<text>{{item.title}}</text>
|
||
<!-- v-if="index!==0" -->
|
||
<view style="font-size: 20rpx;">({{item.pro}})</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" @scrolltolower="getTujian" style="height: 900rpx;">
|
||
<view class="tuijian_list">
|
||
<view class="tuijian_item" v-for="(item,index) in tujian_Arr" :key="index">
|
||
<image :src="item.imgurl"></image>
|
||
<view>{{item.title}}</view>
|
||
<!-- <view style="font-size: 20rpx;">{{item.shang_title}}</view> -->
|
||
<view style="font-size: 20rpx;">{{item.price}}</view>
|
||
<view style="font-size: 20rpx;">{{item.real_pro}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 奖品弹窗 -->
|
||
<uni-popup ref="jp_show" type="center" :isMaskClick="false" mask-background-color="rgba(0,0,0,.95)">
|
||
<view class="pop_jp ">
|
||
<view class="jp_title_1">
|
||
<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'
|
||
:animation="!v.kaiqi && kaiqi_index==i ?animationMain:animationBack"
|
||
:style="'background: url('+ v.special_imgurl +') no-repeat 0 0 / 100% 100%;'"
|
||
@click="kaiqi_jp(v.kaiqi,i)">
|
||
<!-- z_imgPath+ 'bei.png -->
|
||
<view class="jp_img"
|
||
:style="'background: url('+ (!v.kaiqi?v.prize_imgurl:v.goodslist_imgurl) +') no-repeat 0 0 / 100% 100%;'">
|
||
|
||
</view>
|
||
<view class="jp_shang_title" v-if="v.kaiqi"> {{v.shang_title}} </view>
|
||
<view class="jp_prize_num">x{{v.prize_num}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="jp_btn">
|
||
<image :src="z_imgPath + 'yjdk.png'" @click="dakai()"></image>
|
||
<image :src="z_imgPath + 'srkc.png'" @click="inkace()"></image>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
z_imgPath: this.$z_img + 'chouka/',
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
goods_id: '',
|
||
goods: {},
|
||
card_set: {},
|
||
news: '',
|
||
|
||
//
|
||
prize_num_type: '',
|
||
bi: true,
|
||
yue: true,
|
||
pay_news: {},
|
||
// 支付失效
|
||
pay_status: false,
|
||
|
||
// 抽卡记录
|
||
shang_cate: [],
|
||
shang_id: 0,
|
||
// 中赏记录
|
||
jl_Arr: [],
|
||
page_num: 1, // 页码
|
||
mixTotal: 0, // 统计信息总页数
|
||
// 图鉴详情
|
||
tujian_cate: [],
|
||
tujian_id: 0,
|
||
tujian_Arr: [],
|
||
page_num_t: 1, // 页码
|
||
mixTotal_t: 0, // 统计信息总页数
|
||
// 翻牌
|
||
jp_news: {},
|
||
jp_arr: [],
|
||
animationMain: null, //正
|
||
animationBack: null,
|
||
kaiqi_index: '',
|
||
// 是否全收 1:全收
|
||
buy_type: 0,
|
||
// 是否开完明信片
|
||
is_open_end: false,
|
||
|
||
}
|
||
},
|
||
|
||
onLoad(v) {
|
||
if (v.pid) {
|
||
uni.setStorageSync('pid', v.pid)
|
||
}
|
||
this.goods_id = v.goods_id
|
||
this.getData()
|
||
this.getDanye(6)
|
||
},
|
||
onShareAppMessage() {
|
||
let that = this;
|
||
return {
|
||
title: "枫岚云赏" + that.goods.title + '系列',
|
||
imageUrl: that.goods.card_banner,
|
||
path: "/pages/chouka/ka?goods_id=" + that.goods_id + '&pid=' + uni.getStorageSync('userinfo').ID
|
||
};
|
||
},
|
||
watch: {
|
||
jp_arr() {
|
||
for (let i = 0; i < this.jp_arr.length; i++) {
|
||
if (this.jp_arr[i].kaiqi) {
|
||
if (this.jp_arr.length - 1 == i) {
|
||
this.is_open_end = true
|
||
return
|
||
}
|
||
} else {
|
||
this.is_open_end = false
|
||
return
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
inkace() {
|
||
let that = this;
|
||
console.log(this.is_open_end)
|
||
if (!this.is_open_end) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '系统将默认自动开启您的奖袋，并存入卡册',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
confirmColor: '#FF7514',
|
||
cancelColor: '#999999 ',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
for (let i = 0; i < that.jp_arr.length; i++) {
|
||
that.$set(that.jp_arr[i], 'kaiqi', true)
|
||
}
|
||
setTimeout(() => {
|
||
that.$refs.jp_show.close()
|
||
}, 2000)
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.$refs.jp_show.close()
|
||
}
|
||
|
||
},
|
||
dakai() {
|
||
for (let i = 0; i < this.jp_arr.length; i++) {
|
||
this.$set(this.jp_arr[i], 'kaiqi', true)
|
||
}
|
||
},
|
||
kaiqi_jp(a, b) {
|
||
let that = this
|
||
that.kaiqi_index = b
|
||
that.animation_main = uni.createAnimation({
|
||
duration: 800,
|
||
timingFunction: 'linear'
|
||
})
|
||
that.animation_back = uni.createAnimation({
|
||
duration: 0,
|
||
timingFunction: 'linear'
|
||
})
|
||
if (!a) {
|
||
// 点击正面
|
||
this.animation_main.rotateY(180).step()
|
||
this.animationMain = this.animation_main.export()
|
||
setTimeout(() => {
|
||
that.$set(that.jp_arr[b], 'kaiqi', true)
|
||
that.animation_back.rotateY(0).step()
|
||
this.animationBack = this.animation_back.export()
|
||
}, 750)
|
||
}
|
||
},
|
||
// 图鉴详情
|
||
change_tujian(e) {
|
||
this.tujian_id = e
|
||
this.page_num_t = 1
|
||
this.tujian_Arr = []
|
||
this.getTujian()
|
||
},
|
||
getTujian() {
|
||
let that = this;
|
||
if (this.page_num_t !== 1 && this.page_num_t > this.mixTotal_t) {
|
||
return
|
||
}
|
||
that.req({
|
||
url: 'cardextractor_goodslist_log',
|
||
Loading: true,
|
||
data: {
|
||
page: that.page_num_t,
|
||
goods_id: that.goods_id,
|
||
shang_id: that.tujian_id
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.tujian_cate = res.data.category;
|
||
// that.tujian_id = that.tujian_cate[0].id;
|
||
that.mixTotal_t = res.data.last_page
|
||
if (that.page_num_t === 1) {
|
||
that.tujian_Arr = res.data.goodslist;
|
||
} else {
|
||
that.tujian_Arr = that.tujian_Arr.concat(res.data.goodslist)
|
||
}
|
||
that.page_num_t += 1
|
||
that.$refs.tujian.open()
|
||
console.log(that.tujian_Arr)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 抽卡记录
|
||
change_shang_id(e) {
|
||
this.shang_id = e
|
||
this.page_num = 1
|
||
this.jl_Arr = []
|
||
this.getjilv()
|
||
},
|
||
getjilv() {
|
||
let that = this;
|
||
if (this.page_num !== 1 && this.page_num > this.mixTotal) {
|
||
return
|
||
}
|
||
that.req({
|
||
url: 'cardextractor_shang_log',
|
||
Loading: true,
|
||
data: {
|
||
page: that.page_num,
|
||
goods_id: that.goods_id,
|
||
shang_id: that.shang_id
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
// that.shang_cate = res.data.category;
|
||
// that.jl_Arr = res.data.data;
|
||
// that.$refs.jilv.open()
|
||
|
||
that.shang_cate = res.data.category;
|
||
that.mixTotal = res.data.last_page
|
||
if (that.page_num === 1) {
|
||
that.jl_Arr = res.data.data;
|
||
} else {
|
||
that.jl_Arr = that.jl_Arr.concat(res.data.data)
|
||
}
|
||
that.page_num += 1
|
||
that.$refs.jilv.open()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
change_yuan_index(e) {
|
||
if (e == 1) {
|
||
this.bi = !this.bi
|
||
}
|
||
if (e == 2) {
|
||
this.yue = !this.yue
|
||
}
|
||
this.order_money()
|
||
},
|
||
choujiang(e) {
|
||
this.prize_num_type = e
|
||
this.order_money()
|
||
},
|
||
order_money() {
|
||
let that = this;
|
||
that.req({
|
||
url: 'cardextractor_ordermoney',
|
||
Loading: true,
|
||
data: {
|
||
prize_num_type: that.prize_num_type,
|
||
goods_id: that.goods_id,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.$refs.order_show.open()
|
||
that.pay_news = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
pay() {
|
||
let that = this;
|
||
that.jp_arr = []
|
||
let info = {
|
||
prize_num_type: that.prize_num_type,
|
||
goods_id: that.goods_id,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2
|
||
}
|
||
if (that.pay_status) {
|
||
return
|
||
}
|
||
that.req({
|
||
url: 'cardextractor_orderbuy',
|
||
data: info,
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
if (res.data.status == 1) {
|
||
that.info = {}
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.res.timeStamp,
|
||
nonceStr: res.data.res.nonceStr,
|
||
package: res.data.res.package,
|
||
signType: 'MD5',
|
||
paySign: res.data.res.paySign,
|
||
complete(ress) {
|
||
if (ress.errMsg == 'requestPayment:fail cancel') {
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
}
|
||
if (ress.errMsg == 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
that.$refs.order_show.close()
|
||
that.req({
|
||
url: 'cardextractor_prizeorderlog',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
that.jp_news = aa.data
|
||
.user_info
|
||
that.jp_arr = aa.data.data
|
||
that.$refs.jp_show.open()
|
||
// that.loadData(1)
|
||
}
|
||
|
||
}
|
||
})
|
||
}, 1500)
|
||
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
that.info = {}
|
||
that.$refs.order_show.close()
|
||
that.req({
|
||
url: 'cardextractor_prizeorderlog',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
that.jp_news = aa.data.user_info
|
||
that.jp_arr = aa.data.data
|
||
that.$refs.jp_show.open()
|
||
// that.loadData(1)
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
tokefu() {
|
||
// #ifdef MP-WEIXIN
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: uni.getStorageSync('wx_link') //客服地址链接
|
||
},
|
||
corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
|
||
success(res) {
|
||
console.log(res, 1)
|
||
},
|
||
fail(res) {
|
||
console.log(res, 2)
|
||
},
|
||
})
|
||
// #endif
|
||
},
|
||
getDanye(e) {
|
||
let that = this;
|
||
that.req({
|
||
url: 'danye',
|
||
data: {
|
||
type: e
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.news = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
back() {
|
||
// uni.navigateBack()
|
||
uni.switchTab({
|
||
url: '/pages/chouka/index'
|
||
})
|
||
},
|
||
getData() {
|
||
let that = this;
|
||
that.req({
|
||
url: 'cardextractor_goodsdetail',
|
||
Loading: true,
|
||
data: {
|
||
goods_id: that.goods_id
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.goods = res.data;
|
||
that.card_set = res.data.card_set
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.jp_btn>image {
|
||
width: 301rpx;
|
||
height: 93rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.jp_btn {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 200rpx;
|
||
/* background: rgba(0, 0, 0, 0.85); */
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.jp_prize_num {
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
margin-top: -10rpx;
|
||
}
|
||
|
||
.jp_shang_title {
|
||
position: absolute;
|
||
top: 22rpx;
|
||
left: 14rpx;
|
||
box-sizing: border-box;
|
||
background: #FF7514;
|
||
color: #FFFFFF;
|
||
padding: 2rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 0 0 10rpx 0;
|
||
}
|
||
|
||
.jp_img {
|
||
/* position: absolute;
|
||
top: 14rpx;
|
||
left: 14rpx;
|
||
box-sizing: border-box; */
|
||
width: 210rpx;
|
||
height: 283rpx;
|
||
margin: 15rpx auto;
|
||
}
|
||
|
||
|
||
.jp_list {
|
||
font-size: 24rpx;
|
||
width: 224rpx;
|
||
height: 318rpx;
|
||
margin-top: 20rpx;
|
||
/* padding: 0 30rpx; */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.jp_title_1>view:nth-child(3n+2) {
|
||
/* margin: 20rpx 26rpx 0; */
|
||
}
|
||
|
||
.jp_title_1 {
|
||
width: 750rpx;
|
||
/* padding: 0 40rpx; */
|
||
box-sizing: border-box;
|
||
/* height: 900rpx; */
|
||
/* overflow-y: scroll; */
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pop_jp {
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
padding-top: 88rpx;
|
||
padding-bottom: 300rpx;
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tuijian_item>image {
|
||
width: 212rpx;
|
||
height: 297rpx;
|
||
}
|
||
|
||
.tuijian_item {
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
width: 212rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.tuijian_list>.tuijian_item:nth-child(3n+2) {
|
||
margin: 20rpx 20rpx 0;
|
||
}
|
||
|
||
.tuijian_list {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
/* height: 700rpx; */
|
||
}
|
||
|
||
.jilv_list>view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #F7F7F7;
|
||
}
|
||
|
||
.jilv_list image:nth-of-type(2) {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 5rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.jilv_list image:nth-of-type(1) {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.jilv_list {
|
||
width: 657rpx;
|
||
height: 164rpx;
|
||
border: 2rpx solid #F7F7F7;
|
||
margin: 22rpx auto;
|
||
padding: 10rpx 20rpx 16rpx 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
.jilv_title>view {
|
||
padding: 4rpx 20rpx;
|
||
border: 3rpx solid;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
color: #F7F7F7;
|
||
}
|
||
|
||
.jilv_title {
|
||
font-size: 30rpx;
|
||
color: #F7F7F7;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin: 20rpx auto;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.fangshi text {
|
||
color: #FF7514;
|
||
}
|
||
|
||
.fangshi>view>image {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.fangshi image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.fangshi {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.zhifu {
|
||
width: 252rpx;
|
||
height: 67rpx;
|
||
background: #FF7514;
|
||
border-radius: 7rpx;
|
||
font-size: 33rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_title_btn {
|
||
width: 690rpx;
|
||
height: 98rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order_num text {
|
||
font-size: 32rpx;
|
||
color: #FF7514;
|
||
}
|
||
|
||
.order_num>view:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.order_num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1rpx solid #333333;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.order_pic>view>view:nth-of-type(3) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 610rpx;
|
||
}
|
||
|
||
.order_pic>view:nth-of-type(2) {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
padding-top: 14rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order_pic_img>image {
|
||
width: 168rpx;
|
||
height: 168rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.order_pic_img {
|
||
width: 0;
|
||
height: 188rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_pic {
|
||
display: flex;
|
||
}
|
||
|
||
.order_title_con1 {
|
||
width: 690rpx;
|
||
background: #090909;
|
||
border: 2rpx solid #FF7514;
|
||
border-radius: 17rpx;
|
||
margin-top: 28rpx;
|
||
padding: 20rpx 30rpx 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order_title>image {
|
||
width: 275rpx;
|
||
height: 88rpx;
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: -44rpx;
|
||
}
|
||
|
||
.order_title {
|
||
font-size: 50rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
position: relative;
|
||
text-align: right;
|
||
}
|
||
|
||
.order {
|
||
width: 750rpx;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
border-radius: 30rpx 30rpx 0px 0px;
|
||
border: 5rpx solid #FF7315;
|
||
border-bottom: none;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 10rpx 30rpx 50rpx;
|
||
box-sizing: border-box;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
|
||
.pop_con {
|
||
height: 440rpx;
|
||
margin: auto;
|
||
padding: 0rpx 36rpx;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.pop {
|
||
width: 543rpx;
|
||
height: 801rpx;
|
||
padding-top: 192rpx;
|
||
box-sizing: border-box;
|
||
/* background: #FFFFFF; */
|
||
/* border-radius: 20rpx; */
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
|
||
button {
|
||
background-color: transparent;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
line-height: inherit;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.xuanfu image {
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.xuanfu {
|
||
position: fixed;
|
||
bottom: 391rpx;
|
||
right: 20rpx;
|
||
width: 77rpx;
|
||
z-index: 21;
|
||
}
|
||
|
||
.footer>view>view {
|
||
width: 145rpx;
|
||
height: 75rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
top: -20rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
padding-bottom: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.footer>view {
|
||
width: 311rpx;
|
||
height: 124rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.footer>view:nth-of-type(3) {
|
||
width: 268rpx;
|
||
height: 265rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.footer {
|
||
width: 650rpx;
|
||
/* margin: 330rpx auto; */
|
||
margin: 120rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.box>view {
|
||
/* width: 631rpx;
|
||
height: 889rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: -138rpx;
|
||
left: -188rpx; */
|
||
width: 255rpx;
|
||
height: 473rpx;
|
||
display: block;
|
||
margin: 138rpx auto 0;
|
||
}
|
||
|
||
.box {
|
||
/* width: 255rpx;
|
||
height: 473rpx;
|
||
margin: 170rpx auto 0;
|
||
position: relative; */
|
||
width: 631rpx;
|
||
height: 889rpx;
|
||
padding-top: 1rpx;
|
||
margin: 20rpx auto 0;
|
||
}
|
||
|
||
.gonggao {
|
||
width: 718rpx;
|
||
height: 48rpx;
|
||
margin: 20rpx auto;
|
||
/* display: flex; */
|
||
/* align-items: center; */
|
||
font-size: 22rpx;
|
||
color: #CCCCCC;
|
||
padding-top: 6rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.ka_title text {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
.ka_title>view {
|
||
box-shadow: 0px 9rpx 55rpx 0px rgba(255, 117, 20, 0.64) inset;
|
||
border: 3rpx solid #FF7514;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 34rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.ka_title {
|
||
width: 750rpx;
|
||
height: 128rpx;
|
||
background: #161616;
|
||
box-shadow: 0px 9rpx 55rpx 0px rgba(255, 117, 20, 0.64);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.header_title>view:nth-of-type(2) {
|
||
width: 520rpx;
|
||
text-align: center;
|
||
/* margin: auto; */
|
||
}
|
||
|
||
.header_title>view:nth-of-type(1) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header_title image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.header_title {
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.head {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 20;
|
||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
|
||
width: 750rpx;
|
||
box-sizing: border-box;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.status_bar {
|
||
height: var(--status-bar-height);
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
background: #222222;
|
||
width: 100vw;
|
||
height: 1597rpx;
|
||
padding-top: 150rpx;
|
||
box-sizing: border-box;
|
||
background-attachment: fixed;
|
||
position: relative;
|
||
}
|
||
</style>
|