You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
9.8 KiB
381 lines
9.8 KiB
<template>
|
|
<view class="container">
|
|
<PopManager :show="redPagss" :type="type" @clickmask="closeBtn">
|
|
<!-- style="text-align: center;position: relative;" -->
|
|
<view class="b-f redPag">
|
|
<view class="redpacket-title dis-flex flex-y-center">
|
|
<view class="f-34 redText dis-flex flex-x-center f-30 col-3">我的红包</view>
|
|
<view class="i iocn iconfont icon-close_light closeBtn f-24 dis-flex flex-box col-3" @click="closeBtn"></view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="scroll-Y">
|
|
<!-- <radio-group @change="radioChange"> -->
|
|
<evan-radio-group @change="radioChange" v-model="redPagId">
|
|
<view v-for="(item,index) in orderSubmitInfo" :key="index">
|
|
<view class="usedpacket m-top-btm10">
|
|
<view class="usedpacket-list">
|
|
<view class="usedpacket-list-item dis-flex">
|
|
<view class="usedpacket-itemleft p-r dis-flex flex-dir-column flex-x-center">
|
|
<view class="usedpacket-priceStyle col-f f-50 t-c">
|
|
<text class="f-30">¥</text>
|
|
{{ item.cut_money }}
|
|
</view>
|
|
<view class="f-24 col-f t-c">满{{ item.full_money }}可用</view>
|
|
<view class="itemleft_bgstyle"></view>
|
|
<view class="itemleft_bgstyle2"></view>
|
|
</view>
|
|
<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
|
|
<view class="usedpacket_titleType dis-flex flex-y-center">
|
|
<view class="usedpacketType t-c m-right10 dis-flex flex-y-center">
|
|
<text class="col-f f-24">{{ item.label }}</text>
|
|
</view>
|
|
<view class="usedpacketTitle onelist-hidden f-28 col-3">{{ item.title }}</view>
|
|
</view>
|
|
<view class="col-9 f-24 m-top-btm10">范围：{{ item.use_where }}</view>
|
|
<view class="col-9 f-24">{{ item.time }}</view>
|
|
<view class="getDraw t-c col-f f-24">
|
|
|
|
<!-- <evan-radio :value="item.id" clearable color="#ff4444" /> -->
|
|
<!-- <evan-radio-group @change="radioChange" v-model="color"> -->
|
|
<!-- <view class="evan-radio-show__group-item" v-for="item in colorList" > -->
|
|
<evan-radio clearable :label="item.id" primaryColor="#ff4444"></evan-radio>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</evan-radio-group>
|
|
<view class="f-28" style="padding: 20upx 0;color: #333333;" v-if="noorderSubmitInfo.length > 0">
|
|
暂不可用红包({{noorderSubmitInfo.length}})
|
|
</view>
|
|
<evan-radio-group @change="radioChange" v-model="redPagId" v-if="noorderSubmitInfo.length > 0">
|
|
<view v-for="(item,index) in noorderSubmitInfo" :key="index">
|
|
<view class="usedpacket m-top-btm10">
|
|
<view class="usedpacket-list">
|
|
<view class="usedpacket-list-item dis-flex">
|
|
<view class="usedpacket-itemleft-l p-r dis-flex flex-dir-column flex-x-center">
|
|
<view class="usedpacket-priceStyle col-f f-50 t-c">
|
|
<text class="f-30">¥</text>
|
|
{{ item.cut_money }}
|
|
</view>
|
|
<view class="f-24 col-f t-c">满{{ item.full_money }}可用</view>
|
|
<view class="itemleft_bgstyle"></view>
|
|
<view class="itemleft_bgstyle2"></view>
|
|
</view>
|
|
<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
|
|
<view class="usedpacket_titleType dis-flex flex-y-center">
|
|
<view class="usedpacketType t-c m-right10 dis-flex flex-y-center">
|
|
<text class="col-f f-24">{{ item.label }}</text>
|
|
</view>
|
|
<view class="usedpacketTitle onelist-hidden f-28 col-3">{{ item.title }}</view>
|
|
</view>
|
|
<view class="col-9 f-24 m-top-btm10">范围：{{ item.use_where }}</view>
|
|
<view class="col-9 f-24">{{ item.time }}</view>
|
|
<view class="getDraw t-c col-f f-24">
|
|
|
|
<!-- <evan-radio :value="item.id" clearable color="#ff4444" /> -->
|
|
<!-- <evan-radio-group @change="radioChange" v-model="color"> -->
|
|
<!-- <view class="evan-radio-show__group-item" v-for="item in colorList" > -->
|
|
<evan-radio clearable disabled :label="item.id" primaryColor="#ff4444"></evan-radio>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</evan-radio-group>
|
|
</scroll-view>
|
|
</view>
|
|
</PopManager>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
// #ifdef H5
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
// #endif
|
|
import PopManager from '@/components/template/PopManager';
|
|
import EvanRadioGroup from '@/pages/subPages2/tamplate/evan-radio/evan-radio-group.vue'
|
|
import EvanRadio from '@/pages/subPages2/tamplate/evan-radio/evan-radio.vue'
|
|
|
|
export default {
|
|
components: {
|
|
PopManager,
|
|
EvanRadio,
|
|
EvanRadioGroup
|
|
},
|
|
data() {
|
|
return {
|
|
colorList: [{
|
|
label: '红色',
|
|
value: 'red'
|
|
},
|
|
{
|
|
label: '绿色',
|
|
value: 'green'
|
|
},
|
|
{
|
|
label: '蓝色',
|
|
value: 'blue'
|
|
},
|
|
{
|
|
label: '粉色',
|
|
value: 'pink'
|
|
},
|
|
{
|
|
label: '黑色',
|
|
value: 'black'
|
|
},
|
|
],
|
|
redPagId:'',
|
|
type: 'bottom',
|
|
redPagss: false,
|
|
MoneyOff: '',
|
|
current: 0,
|
|
radioList: [
|
|
{
|
|
value: 1
|
|
},
|
|
{
|
|
value: 2
|
|
},
|
|
{
|
|
value: 3
|
|
},
|
|
{
|
|
value: 4
|
|
},
|
|
{
|
|
value: 5
|
|
},
|
|
{
|
|
value: 6
|
|
},
|
|
{
|
|
value: 7
|
|
}
|
|
],
|
|
flage:false
|
|
};
|
|
},
|
|
methods: {
|
|
closeBtn() {
|
|
let _this = this;
|
|
_this.redPagss = false;
|
|
// for (let i = 0; i < this.orderSubmitInfo.length; i++) {
|
|
// _this.orderSubmitInfo[i].checked = false;
|
|
// }
|
|
},
|
|
radioChange: function(e,flag) {
|
|
let _this = this;
|
|
let num = _this.orderSubmitInfo.length;
|
|
console.log(e,_this.redPagId);
|
|
// debugger
|
|
_this.orderSubmitInfo.forEach((item,index)=>{
|
|
if(item.id == e){
|
|
let obj = JSON.parse(JSON.stringify(item));
|
|
obj.check = true;
|
|
_this.$emit('priceis', obj);
|
|
}else if(item.id == flag){
|
|
let obj = JSON.parse(JSON.stringify(item));
|
|
obj.check = false;
|
|
_this.$emit('priceis', obj);
|
|
}
|
|
})
|
|
// console.log(_this.redPagId);
|
|
// console.log(_this.orderSubmitInfo);
|
|
// for (let i = 0; i < _this.orderSubmitInfo.length; i++) {
|
|
// if (_this.orderSubmitInfo[i].id == evt.target.value) {
|
|
// // _this.orderSubmitInfo[i].isCheked = !_this.orderSubmitInfo[i].isCheked;
|
|
//
|
|
// } else {
|
|
// // _this.orderSubmitInfo[i].isCheked = false;
|
|
// }
|
|
// }
|
|
// console.log(_this.orderSubmitInfo);
|
|
_this.closeBtn();
|
|
}
|
|
},
|
|
props: {
|
|
orderSubmitInfo: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 红包弹出框显示
|
|
noorderSubmitInfo:{
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
watch: {
|
|
'orderSubmitInfo': {
|
|
handler(val,oldVal) {
|
|
// debugger
|
|
setTimeout(()=>{
|
|
if(val.length == 0){
|
|
this.redPagId = ''
|
|
}
|
|
if(this.redPagId == ''){
|
|
this.redPagId = this.orderSubmitInfo[0].id;
|
|
let obj = JSON.parse(JSON.stringify(this.orderSubmitInfo[0]));
|
|
obj.check = true;
|
|
this.$emit('priceis',obj);
|
|
}else{
|
|
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
immediate: true,
|
|
deep: true, //对象内部的属性监听，也叫深度监听
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.redPag {
|
|
width: 100vw;
|
|
height: 830upx;
|
|
padding: 40upx 30upx;
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 20px 20px 0px 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
.scroll-Y {
|
|
height: 750upx;
|
|
}
|
|
.redpacket-title {
|
|
width: 100%;
|
|
}
|
|
.redText {
|
|
width: 95%;
|
|
flex-shrink: 0;
|
|
}
|
|
.usedpacket {
|
|
.usedpacket-list {
|
|
.usedpacket-list-item {
|
|
height: 170upx;
|
|
.usedpacket-itemleft-l {
|
|
width: 28%;
|
|
height: 100%;
|
|
background-color: #CCCCCC;
|
|
padding: 0 20upx;
|
|
flex-shrink: 0;
|
|
|
|
.usedpacket-priceStyle {
|
|
margin-right: 12upx;
|
|
|
|
> text {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 4upx;
|
|
}
|
|
}
|
|
|
|
.itemleft_bgstyle {
|
|
width: 30upx;
|
|
height: 30upx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: -16upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.itemleft_bgstyle2 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 1%;
|
|
height: 170upx;
|
|
padding-left: 4upx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
background: radial-gradient(transparent 0, transparent 8upx, #fff 8upx);
|
|
background-size: 16upx 16upx;
|
|
background-position: 16upx 0px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
.usedpacket-itemleft {
|
|
width: 28%;
|
|
height: 100%;
|
|
background: linear-gradient(129deg, rgba(251, 131, 81, 1) 0%, rgba(255, 68, 68, 1) 100%);
|
|
padding: 0 20upx;
|
|
flex-shrink: 0;
|
|
|
|
.usedpacket-priceStyle {
|
|
margin-right: 12upx;
|
|
|
|
> text {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 4upx;
|
|
}
|
|
}
|
|
|
|
.itemleft_bgstyle {
|
|
width: 30upx;
|
|
height: 30upx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: -16upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.itemleft_bgstyle2 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 1%;
|
|
height: 170upx;
|
|
padding-left: 4upx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
background: radial-gradient(transparent 0, transparent 8upx, #fff 8upx);
|
|
background-size: 16upx 16upx;
|
|
background-position: 16upx 0px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.usedpacket-itemright {
|
|
height: 100%;
|
|
|
|
.usedpacket_titleType {
|
|
.usedpacketType {
|
|
padding: 0 6upx;
|
|
height: 28upx;
|
|
background-color: #ff4444;
|
|
border-radius: 14upx;
|
|
|
|
> text {
|
|
display: inline-block;
|
|
transform: scale(0.85);
|
|
}
|
|
}
|
|
|
|
.usedpacketTitle {
|
|
width: 240upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.getDraw {
|
|
position: absolute;
|
|
right: 30upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
line-height: 40upx;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|