|
@@ -1,8 +1,7 @@
|
|
|
<template name="coupon">
|
|
|
<view class="coupon-template">
|
|
|
<view class="coupon-title" @tap.stop="showPopup">
|
|
|
- <text class="text">优惠券:</text>
|
|
|
- <text class="text-coupon">-¥{{ coupon.couponAmount | NumFormat }}</text>
|
|
|
+ <text class="text">优惠券:</text> <text class="text-coupon">-¥{{ coupon.couponAmount | NumFormat }}</text>
|
|
|
<text class="iconfont icon-xiayibu"></text>
|
|
|
</view>
|
|
|
<!-- 优惠券 -->
|
|
@@ -13,21 +12,27 @@
|
|
|
<view class="title-r" @click="showExchangePopup">兑换优惠券</view>
|
|
|
</view>
|
|
|
<div class="tui-popup-main coupon">
|
|
|
- <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
+ <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
<view class="coupon-empty" v-if="isCouponEmpty">
|
|
|
- <image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
|
|
|
+ ></image>
|
|
|
<text class="error-text">暂无可用优惠券~</text>
|
|
|
</view>
|
|
|
<template>
|
|
|
- <view v-for="(coupon,index) in dataList" :key="index" class="coupon-list" @click.stop="checkedCoupon(index)" v-if="dataList.length>0">
|
|
|
+ <view
|
|
|
+ v-for="(coupon, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ class="coupon-list"
|
|
|
+ @click.stop="checkedCoupon(index)"
|
|
|
+ v-if="dataList.length > 0"
|
|
|
+ >
|
|
|
<view class="list-cell-le">
|
|
|
<view class="coupon-maxMoney">
|
|
|
- <text class="small">¥</text>
|
|
|
- {{ coupon.couponAmount }}
|
|
|
- </view>
|
|
|
- <view class="coupon-minMoney">
|
|
|
- 满{{ coupon.touchPrice }}可用
|
|
|
+ <text class="small">¥</text> {{ coupon.couponAmount }}
|
|
|
</view>
|
|
|
+ <view class="coupon-minMoney"> 满{{ coupon.touchPrice }}可用 </view>
|
|
|
</view>
|
|
|
<view class="list-cell-ri">
|
|
|
<view class="list-cell-top">
|
|
@@ -37,19 +42,32 @@
|
|
|
</view>
|
|
|
<view class="list-cell-texts">
|
|
|
<text v-if="coupon.couponType == 0">
|
|
|
- {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
|
|
|
+ {{
|
|
|
+ coupon.productType && coupon.productType == 1
|
|
|
+ ? '全商城商品通用'
|
|
|
+ : '仅可购买指定商品'
|
|
|
+ }}
|
|
|
</text>
|
|
|
<text v-if="coupon.couponType == 1">
|
|
|
- {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
|
|
|
+ {{
|
|
|
+ coupon.categoryType == 1
|
|
|
+ ? '仅限购买产品类商品'
|
|
|
+ : '仅限购买仪器类商品'
|
|
|
+ }}
|
|
|
</text>
|
|
|
- <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
- <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ <text v-if="coupon.couponType == 3"
|
|
|
+ >仅限购买店铺【{{ coupon.shopName }}】的商品</text
|
|
|
+ >
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2"
|
|
|
+ >全商城商品通用</text
|
|
|
+ >
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="list-cell-btn">
|
|
|
<view class="list-cell-checkbox">
|
|
|
- <view class="checkbox iconfont"
|
|
|
- :class="[coupon.ischecked ?'icon-yixuanze':'icon-weixuanze']"
|
|
|
+ <view
|
|
|
+ class="checkbox iconfont"
|
|
|
+ :class="[coupon.ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -61,377 +79,378 @@
|
|
|
</template>
|
|
|
</scroll-view>
|
|
|
</div>
|
|
|
- <view class="tui-right-flex tui-popup-btn">
|
|
|
- <view class="tui-flex-1">
|
|
|
- <view class="tui-button" @click="hidePopup">确定</view>
|
|
|
- </view>
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
+ <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup">确定</view> </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </tui-bottom-popup>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default{
|
|
|
- name:'coupon',
|
|
|
- props:{
|
|
|
- couponList:{
|
|
|
- type:Array
|
|
|
+export default {
|
|
|
+ name: 'coupon',
|
|
|
+ props: {
|
|
|
+ couponList: {
|
|
|
+ type: Array
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl: this.$Static, //静态图片路径
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ popupShow: false,
|
|
|
+ isCouponEmpty: false,
|
|
|
+ checkedIndex: null,
|
|
|
+ dataList: [],
|
|
|
+ coupon: {
|
|
|
+ couponAmount: 0,
|
|
|
+ clubCouponId: 0
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ //处理金额
|
|
|
+ return Number(value).toFixed(2)
|
|
|
},
|
|
|
- data() {
|
|
|
- return{
|
|
|
- StaticUrl:this.$Static, //静态图片路径
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
- popupShow:false,
|
|
|
- isCouponEmpty:false,
|
|
|
- checkedIndex:null,
|
|
|
- dataList:[],
|
|
|
- coupon:{
|
|
|
- couponAmount:0,
|
|
|
- clubCouponId:0,
|
|
|
- },
|
|
|
+ TypeFormat(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 0:
|
|
|
+ return '活动券'
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ return '品类券'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ return '用户专享券'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ return '店铺券'
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ return '新用户券'
|
|
|
+ break
|
|
|
}
|
|
|
- },
|
|
|
- filters:{
|
|
|
- NumFormat(value) {//处理金额
|
|
|
- return Number(value).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initData(this.couponList)
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ couponList: {
|
|
|
+ handler: function(el) {
|
|
|
+ //监听对象的变换使用 function,箭头函数容易出现this指向不正确
|
|
|
+ console.log(el)
|
|
|
+ this.couponList = el
|
|
|
},
|
|
|
- TypeFormat(value) {
|
|
|
- switch (value) {
|
|
|
- case 0:
|
|
|
- return '活动券'
|
|
|
- break
|
|
|
- case 1:
|
|
|
- return '品类券'
|
|
|
- break
|
|
|
- case 2:
|
|
|
- return '用户专享券'
|
|
|
- break
|
|
|
- case 3:
|
|
|
- return '店铺券'
|
|
|
- break
|
|
|
- case 4:
|
|
|
- return '新用户券'
|
|
|
- break
|
|
|
- }
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(data) {
|
|
|
+ if (data.length > 0) {
|
|
|
+ data.forEach((el, index) => {
|
|
|
+ this.dataList.push(Object.assign({}, el, { ischecked: false }))
|
|
|
+ })
|
|
|
+ this.coupon.couponAmount = data[0].couponAmount
|
|
|
+ this.dataList[0].ischecked = true
|
|
|
+ this.isCouponEmpty = false
|
|
|
+ } else {
|
|
|
+ this.isCouponEmpty = true
|
|
|
}
|
|
|
- },
|
|
|
- created(){
|
|
|
- this.initData(this.couponList)
|
|
|
},
|
|
|
- watch: {
|
|
|
- couponList: {
|
|
|
- handler: function (el) {//监听对象的变换使用 function,箭头函数容易出现this指向不正确
|
|
|
- console.log(el)
|
|
|
- this.couponList = el
|
|
|
- },
|
|
|
- deep: true
|
|
|
+ checkedCoupon(idx) {
|
|
|
+ // 选择优惠券
|
|
|
+ this.checkedIndex = idx
|
|
|
+ this.dataList.forEach((el, index) => {
|
|
|
+ if (this.checkedIndex == index) {
|
|
|
+ el.ischecked = !el.ischecked
|
|
|
+ } else {
|
|
|
+ el.ischecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showExchangePopup() {
|
|
|
+ this.popupShow = false
|
|
|
+ this.$parent.isExchangePopup = true
|
|
|
+ },
|
|
|
+ showPopup() {
|
|
|
+ if (this.$parent.rebatecheck) {
|
|
|
+ this.$util.msg('返佣订单不能使用优惠券', 2000)
|
|
|
+ } else {
|
|
|
+ this.popupShow = true
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- initData(data){
|
|
|
- if(data.length>0){
|
|
|
- data.forEach((el,index) => {
|
|
|
- this.dataList.push(Object.assign({},el,{ischecked:false}))
|
|
|
- })
|
|
|
- this.coupon.couponAmount = data[0].couponAmount
|
|
|
- this.dataList[0].ischecked = true
|
|
|
- this.isCouponEmpty = false
|
|
|
- }else{
|
|
|
- this.isCouponEmpty = true
|
|
|
- }
|
|
|
- },
|
|
|
- checkedCoupon(idx){// 选择优惠券
|
|
|
- this.checkedIndex = idx
|
|
|
- this.dataList.forEach((el,index) => {
|
|
|
- if(this.checkedIndex == index){
|
|
|
- el.ischecked = !el.ischecked
|
|
|
- }else{
|
|
|
- el.ischecked = false
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- showExchangePopup(){
|
|
|
- this.popupShow = false
|
|
|
- this.$parent.isExchangePopup = true
|
|
|
- },
|
|
|
- showPopup(){
|
|
|
- if(this.$parent.rebatecheck){
|
|
|
- this.$util.msg('返佣订单不能使用优惠券',2000)
|
|
|
- }else{
|
|
|
- this.popupShow = true
|
|
|
- }
|
|
|
- },
|
|
|
- hidePopup(){
|
|
|
- this.popupShow = false
|
|
|
- let coupon = {
|
|
|
- couponAmount:0,
|
|
|
- clubCouponId:0,
|
|
|
- }
|
|
|
- this.dataList.forEach((el,index) => {
|
|
|
- if(el.ischecked){
|
|
|
- coupon.couponAmount = el.couponAmount
|
|
|
- coupon.clubCouponId = el.clubCouponId
|
|
|
- }
|
|
|
- })
|
|
|
- this.coupon = coupon
|
|
|
- this.$emit('handleChoiceaCoupon',this.coupon)
|
|
|
+ hidePopup() {
|
|
|
+ this.popupShow = false
|
|
|
+ let coupon = {
|
|
|
+ couponAmount: 0,
|
|
|
+ clubCouponId: 0
|
|
|
}
|
|
|
+ this.dataList.forEach((el, index) => {
|
|
|
+ if (el.ischecked) {
|
|
|
+ coupon.couponAmount = el.couponAmount
|
|
|
+ coupon.clubCouponId = el.clubCouponId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.coupon = coupon
|
|
|
+ this.$emit('handleChoiceaCoupon', this.coupon)
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .coupon-template{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background: #FFFFFF;
|
|
|
- float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- .coupon-title{
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- position: relative;
|
|
|
- .text{
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .text-coupon{
|
|
|
- display: inline-block;
|
|
|
- float: right;
|
|
|
- padding-right: 30rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- .iconfont{
|
|
|
- width: 50rpx;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- color: #999999;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-popup-box {
|
|
|
+.coupon-template {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background: #ffffff;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .coupon-title {
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- min-height: 220rpx;
|
|
|
- padding:24rpx 24rpx 0 24rpx;
|
|
|
- .title{
|
|
|
- font-size: $font-size-34;
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-28;
|
|
|
color: $text-color;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .text-coupon {
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ padding-right: 30rpx;
|
|
|
line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ width: 50rpx;
|
|
|
height: 88rpx;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- .title-l{
|
|
|
- flex: 1;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .title-r{
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
+ line-height: 88rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 220rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ .title {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title-l {
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
- .tui-popup-main{
|
|
|
+ .title-r {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-main {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .tui-popup-scroll {
|
|
|
width: 100%;
|
|
|
- float: left;
|
|
|
- padding-top: 10rpx;
|
|
|
- .tui-popup-scroll{
|
|
|
+ height: 600rpx;
|
|
|
+ .coupon-empty {
|
|
|
width: 100%;
|
|
|
height: 600rpx;
|
|
|
- .coupon-empty{
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- position: fixed;
|
|
|
- background: $bg-color;
|
|
|
- .empty-container-image{
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- margin-bottom: 0;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .error-text{
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #999999;
|
|
|
- line-height: 88rpx;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ background: $bg-color;
|
|
|
+ .empty-container-image {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
- .coupon-list{
|
|
|
- width: 100%;
|
|
|
- height: 200rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ .error-text {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ .list-cell-le {
|
|
|
+ width: 224rpx;
|
|
|
+ height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
|
|
|
- background-size: cover;
|
|
|
- .list-cell-le{
|
|
|
- width: 224rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 37rpx 0;
|
|
|
- float: left;
|
|
|
- .coupon-maxMoney{
|
|
|
- width: 100%;
|
|
|
- height: 78rpx;
|
|
|
- line-height: 78rpx;
|
|
|
- font-size: 56rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- .small{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-minMoney{
|
|
|
- width: 100%;
|
|
|
- height: 33rpx;
|
|
|
- line-height: 33rpx;
|
|
|
+ padding: 37rpx 0;
|
|
|
+ float: left;
|
|
|
+ .coupon-maxMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ line-height: 78rpx;
|
|
|
+ font-size: 56rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ .small {
|
|
|
font-size: $font-size-24;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- .list-cell-ri{
|
|
|
- width: 478rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 24rpx 0 24rpx;
|
|
|
- float: right;
|
|
|
- .list-cell-top{
|
|
|
- width: 100%;
|
|
|
- height: 121rpx;
|
|
|
+ .coupon-minMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 33rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-ri {
|
|
|
+ width: 478rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 24rpx 0 24rpx;
|
|
|
+ float: right;
|
|
|
+ .list-cell-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 121rpx;
|
|
|
+ float: left;
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ .list-cell-type {
|
|
|
+ width: 286rpx;
|
|
|
+ height: 100%;
|
|
|
float: left;
|
|
|
- border-bottom: 1px solid #e1e1e1;
|
|
|
- .list-cell-type{
|
|
|
- width: 286rpx;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- .list-cell-tags{
|
|
|
- width: 100%;
|
|
|
+ .list-cell-tags {
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-bottom: 7rpx;
|
|
|
+ .tags {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
height: 32rpx;
|
|
|
- margin-bottom: 7rpx;
|
|
|
- .tags{
|
|
|
- display: inline-block;
|
|
|
- padding: 0 10rpx;
|
|
|
- height: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- background-color: #ffdcce;
|
|
|
- color: #f94b4b;
|
|
|
- font-size: $font-size-20;
|
|
|
- border-radius: 8rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-cell-texts{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- line-height:35rpx;
|
|
|
- text-overflow:ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background-color: #ffdcce;
|
|
|
+ color: #f94b4b;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
}
|
|
|
}
|
|
|
- .list-cell-btn{
|
|
|
- width: 128rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- .list-cell-checkbox{
|
|
|
- width: 100%;
|
|
|
- height: 50%;
|
|
|
- .checkbox{
|
|
|
- width: 40rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- float: right;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- overflow: hidden;
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- }
|
|
|
+ .list-cell-texts {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
}
|
|
|
- .list-cell-time{
|
|
|
- width: 100%;
|
|
|
- height: 58rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: $font-size-20;
|
|
|
- color: #999999;
|
|
|
+ .list-cell-btn {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ .list-cell-checkbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ .checkbox {
|
|
|
+ width: 40rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ float: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .list-cell-time {
|
|
|
+ width: 100%;
|
|
|
+ height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .tui-popup-coupon{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-coupon {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ .tui-popup-h1 {
|
|
|
width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding:30rpx 20rpx;
|
|
|
- .tui-popup-h1{
|
|
|
- width: 100%;
|
|
|
+ height: 66rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .tui-popup-text {
|
|
|
+ flex: 1;
|
|
|
height: 66rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .tui-popup-text{
|
|
|
- flex: 1;
|
|
|
- height: 66rpx;
|
|
|
- line-height: 66rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- color: #333333;
|
|
|
- &.red{
|
|
|
- color: #f94b4b;
|
|
|
- }
|
|
|
- &.bold{
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &.left{
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- &.right{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ line-height: 66rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #333333;
|
|
|
+ &.red {
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ &.bold {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.left {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.right {
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .tui-popup-btn {
|
|
|
+ }
|
|
|
+ .tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .tui-button {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- .tui-button{
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
+ height: 88rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|