|
@@ -15,10 +15,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- nav end -->
|
|
|
- <!-- 灯光 -->
|
|
|
+ <!-- 灯光 -->
|
|
|
<view class="bjt">
|
|
|
<!-- <image class="light" src="/h5/static/image/new_home/dg.png" mode="widthFix"></image> -->
|
|
|
- <!-- 上半部分 -->
|
|
|
+ <!-- 上半部分 -->
|
|
|
<view class="top">
|
|
|
<!-- <view class="title">
|
|
|
<view class="oval" @click="toRecharge()">
|
|
@@ -35,15 +35,16 @@
|
|
|
<image class="small-img" src="/static/image/new_home/wfsm.png" mode="widthFix"></image>
|
|
|
<span>玩法说明</span>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
+ </view> -->
|
|
|
+
|
|
|
<lunbobox></lunbobox>
|
|
|
- <view class="play-explain" @tap="$refs.regulation.open()">
|
|
|
+ <!-- <view class="play-explain" @tap="$refs.regulation.open()">
|
|
|
<image class="small-img" src="/static/image/tabbar/wodeyixuanzhong@2x1.png" mode="widthFix"></image>
|
|
|
<text>买家须知</text>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="details_footer_coll" @click="changeStar" v-if="type == 0">
|
|
|
<image
|
|
|
- :src="boxDetail.is_star == 1 ? '/static/image/home/shoucangyixuanzhong@2x.png' : '/static/image/home/shoucangweixuanzhong@2x.png'"
|
|
|
+ :src="boxDetail.is_star == 1 ? 'https://chaomd.liuniu946.com/image/home/shoucangyixuanzhong@2x.png' : '/static/image/home/shoucangweixuanzhong@2x.png'"
|
|
|
mode="widthFix"
|
|
|
></image>
|
|
|
</view>
|
|
@@ -82,37 +83,38 @@
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
<!-- 下半部分 -->
|
|
|
- <view class="bottom">
|
|
|
+ <view class="bottom">
|
|
|
<view>
|
|
|
- <!-- 下方按钮区 -->
|
|
|
- <view class="button-container">
|
|
|
+ <!-- 下方按钮区 -->
|
|
|
+ <view class="button-container">
|
|
|
+ <view class="side-btn" @click="haveTry()"><image src="/static/image/new_home/swmhan.png" mode="widthFix"></image></view>
|
|
|
+ <view class="center-btn" @click="selectNum()">
|
|
|
+ <image src="/static/image/new_home/khan.png" mode="widthFix"></image>
|
|
|
+ <!-- <text>立即开箱</text> -->
|
|
|
+ </view>
|
|
|
+ <view class="side-btn" @click="$refs.regulation.open()"><image src="/static/image/new_home/gdmhan.png" mode="widthFix"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="button-container">
|
|
|
<view class="side-btn" @click="haveTry()">
|
|
|
<image src="/static/image/new_home/swmhan.png" mode="widthFix"></image>
|
|
|
- <!-- <text>试玩盲盒</text> -->
|
|
|
</view>
|
|
|
<view class="center-btn" @click="selectNum()">
|
|
|
<image src="/static/image/new_home/khan.png" mode="widthFix"></image>
|
|
|
- <text>立即开箱</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- 下方价格 -->
|
|
|
- <view class="price-container">
|
|
|
+ <!-- <view class="price-container">
|
|
|
<text class="price">{{ boxDetail.box_name }}{{ boxDetail.coin_price }}元/个</text>
|
|
|
- </view>
|
|
|
- <view class="kxbz">盲盒开箱必中以下宝贝之一</view>
|
|
|
- <view class="bottom-top">
|
|
|
- <view class="bottom-top-left"><text>天天开盲盒</text></view>
|
|
|
- <view class="bottom-top-center"><image src="/static/image/new_home/bottom-top-center.png"></image></view>
|
|
|
- <view class="bottom-top-right"><text>未成年必须在家长监督下使用</text></view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="kxbz">盲盒开箱必中以下宝贝之一</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uni-popup ref="num-popup" type="bottom" :mask-click="false">
|
|
|
<view class="num-popup">
|
|
|
- <view class="popup-close" @click="closeNumPopup"><image src="/static/image/home/guanbi@2x.png" mode=""></image></view>
|
|
|
+ <view class="popup-close" @click="closeNumPopup"><image src="https://chaomd.liuniu946.com/image/home/guanbi@2x.png" mode=""></image></view>
|
|
|
<view class="num-button-group">
|
|
|
<view class="num-button" @click="createOder(1)">
|
|
|
<image src="/static/image/new_home/btn-1.png" mode="widthFix"></image>
|
|
@@ -121,11 +123,11 @@
|
|
|
</view>
|
|
|
<view class="num-button-group">
|
|
|
<view class="num-button" @click="createOder(5)">
|
|
|
- <image src="/h5/static/image/new_home/btn-3.png" mode="widthFix"></image>
|
|
|
+ <image src="../../static/image/new_home/btn-3.png" mode="widthFix"></image>
|
|
|
<text>五连绝世</text>
|
|
|
</view>
|
|
|
<view class="num-button" @click="createOder(9)">
|
|
|
- <image src="/h5/static/image/new_home/btn-2.png" mode="widthFix"></image>
|
|
|
+ <image src="../../static/image/new_home/btn-2.png" mode="widthFix"></image>
|
|
|
<text>九连更稳</text>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -139,11 +141,12 @@
|
|
|
|
|
|
<payment ref="payment" :box-id="box_id" :box-num="boxNum" :type="type" @create-success="closeNumPopup" @show-result="showResult"></payment>
|
|
|
<show-result ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle" :type="type"></show-result>
|
|
|
- <recycle ref="recycle"></recycle>
|
|
|
+ <recycle ref="recycle"></recycle>
|
|
|
+ <!-- <image src="https://chaomd.liuniu946.com/image/kxbz.png" mode=""></image> -->
|
|
|
<!-- 商品预览start -->
|
|
|
<view class="goods-view">
|
|
|
<view class="rate-view flex">
|
|
|
- <text class="rate-txt">获得概率</text>
|
|
|
+ <!-- <text class="rate-txt">获得概率</text> -->
|
|
|
<view class="rate-list flex">
|
|
|
<view class="rate-item" v-for="(item, index) in rates" :key="item.value">
|
|
|
<text :class="['rate-name', `rate-name-${index}`]">{{ item.name }}</text>
|
|
@@ -153,13 +156,14 @@
|
|
|
</view>
|
|
|
<view class="goods-list-view flex">
|
|
|
<view class="goods-item" v-for="(item, index) in boxDetail.goodslist" :key="index">
|
|
|
- <text class="goods-tag" :class="'goods-tag-' + item.tag == '传说' ? 0 : item.tag == '史诗' ? 1 : item.tag == '稀有' ? 2 : 3"><!-- {{item.tag}} --></text>
|
|
|
- <view class="goods-img-view"><image :src="item.image" mode="heightFix" @click="lookDetail(item)"></image></view>
|
|
|
- <view class="goods-name">{{ item.goods_name }}</view>
|
|
|
- <view class="goods-price-view">
|
|
|
+ <text class="goods-tag" :class="'goods-tag-' + (item.tag == '传说'?0:(item.tag == '史诗'?1:(item.tag == '稀有'?2:3)))">{{item.tag}}</text>
|
|
|
+ <view class="goods-img-view"><image :src="item.image" mode="" @click="lookDetail(item)"></image></view>
|
|
|
+ <view class="goods-name clamp2">{{ item.goods_name }}</view>
|
|
|
+ <view class="goods-price">¥{{ item.price }}</view>
|
|
|
+ <!-- <view class="goods-price-view">
|
|
|
<span class="rmb">¥</span>
|
|
|
{{ item.price }}
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -264,7 +268,7 @@
|
|
|
<!--S 买家须知 -->
|
|
|
<uni-popup ref="regulation" :mask-click="false">
|
|
|
<view class="regulation">
|
|
|
- <view class="regulation_close" @click="$refs.regulation.close()"><image src="/static/image/home/guanbi@2x.png" mode=""></image></view>
|
|
|
+ <view class="regulation_close" @click="$refs.regulation.close()"><image src="https://chaomd.liuniu946.com/image/home/guanbi@2x.png" mode=""></image></view>
|
|
|
<view class="regulation_name">买家须知</view>
|
|
|
<view class="regulation_main">
|
|
|
<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="message"></u-parse></scroll-view>
|
|
@@ -494,7 +498,8 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.bottom-top {
|
|
|
- height: 50rpx;
|
|
|
+ // height: 50rpx;
|
|
|
+ height: 140rpx;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
.bottom-top .bottom-top-left {
|
|
@@ -971,7 +976,7 @@ uni-page-body {
|
|
|
}
|
|
|
}
|
|
|
.rate-view {
|
|
|
- background: #404040;
|
|
|
+ background: #fff;
|
|
|
padding: 20rpx 0;
|
|
|
.rate-txt {
|
|
|
display: inline-block;
|
|
@@ -983,11 +988,11 @@ uni-page-body {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
+ color: #666666;
|
|
|
border-top-right-radius: 30rpx;
|
|
|
}
|
|
|
.rate-list {
|
|
|
- background: #4a4a4a;
|
|
|
+ background: #ffff;
|
|
|
margin: 5rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 10rpx 0;
|
|
@@ -1012,7 +1017,7 @@ uni-page-body {
|
|
|
}
|
|
|
}
|
|
|
.rate-value {
|
|
|
- color: #ffffff !important;
|
|
|
+ color: #666666 !important;
|
|
|
display: block;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
@@ -1045,60 +1050,78 @@ uni-page-body {
|
|
|
.goods-list-view {
|
|
|
margin-bottom: 100rpx;
|
|
|
flex-wrap: wrap;
|
|
|
- padding: 0 30rpx;
|
|
|
- margin-top: 14rpx;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
+
|
|
|
&::after {
|
|
|
content: '';
|
|
|
width: 220rpx;
|
|
|
}
|
|
|
.goods-item {
|
|
|
- width: 100%;
|
|
|
- padding: 20rpx;
|
|
|
- background: #ffffff;
|
|
|
+ width: 227rpx;
|
|
|
+ height: 291rpx;
|
|
|
+ // padding: 20rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ // background: #000;
|
|
|
border-radius: 16rpx;
|
|
|
position: relative;
|
|
|
- margin-top: 16rpx;
|
|
|
- .goods-tag {
|
|
|
- z-index: 2;
|
|
|
- display: block;
|
|
|
- width: 100rpx;
|
|
|
- text-align: center;
|
|
|
- height: 38rpx;
|
|
|
- line-height: 38rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 24rpx;
|
|
|
- border-radius: 0 0rpx 16rpx 0rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .goods-price {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 188rpx;
|
|
|
+ background-color: #ff7184;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ border-radius: 15rpx 0 15rpx 0;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .goods-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ // background-color: #ff5423;
|
|
|
+ // z-index: 999;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ border-radius: 15rpx 0 15rpx 0;
|
|
|
&-0 {
|
|
|
- background: url(../../static/image/new_home/cs.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
+ background-color: #ff5423;
|
|
|
}
|
|
|
&-1 {
|
|
|
- background: url(../../static/image/new_home/ss.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
+ background-color: #ffaa40;
|
|
|
}
|
|
|
- &-2 {
|
|
|
- background: url(../../static/image/new_home/xy.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
+ &-2 {
|
|
|
+ background-color: #46aaff;
|
|
|
}
|
|
|
- &-3 {
|
|
|
- background: url(../../static/image/new_home/pt.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
+ &-3 {
|
|
|
+ background-color: #7162ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.goods-img-view {
|
|
|
- width: 40%;
|
|
|
- height: 210rpx;
|
|
|
- float: left;
|
|
|
- margin-right: 10rpx;
|
|
|
+ // width: 40%;
|
|
|
+ width: 100%;
|
|
|
+ height: 218rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 218rpx;
|
|
|
+ // margin: auto;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ // float: left;
|
|
|
+ // margin-right: 10rpx;
|
|
|
}
|
|
|
.goods-price-view {
|
|
|
width: 260rpx;
|
|
@@ -1116,14 +1139,16 @@ uni-page-body {
|
|
|
}
|
|
|
}
|
|
|
.goods-name {
|
|
|
- width: 58%;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #171a20;
|
|
|
- line-height: 50rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ // width: 58%;
|
|
|
+ // font-size: 32rpx;
|
|
|
+ // font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ // font-weight: 500;
|
|
|
+ // color: #171a20;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding:5rpx 20rpx 0;
|
|
|
}
|
|
|
}
|
|
|
}
|