hlm_pl_mall_h5/pages/home/pointsgoods/IndexVoucherItem.vue

<template>
<view class="div main-content">
    <view class="div list-wrap-item hongbao-list-wrap-item" @click="exchangeVoucher(item)">
        <view class="div img-box">
            <view class="div img-content">
                <image mode="aspectFit" class="img" :src="hongbaobg" />
                <!---->
            </view>
        </view>
        <view class="div content">
            <view class="div coupon hongbao">
                <view class="div coupon_left">
                    <view class="div price ">
                                    <text class="span text-content">
                                        <text class="span">￥</text>
                                    </text>{{item.vouchertemplate_price}}
                    </view>
                    <view class="div coupon_condition font-size-activity-tag">
                                    <text class="span text-content">
                                        <text class="span">{{item.vouchertemplate_storename}}</text>
                                    </text>

                    </view>
                </view>
                <view class="div coupon_right flex">
                    <view class="div coupon_btn">
                        兑换
                    </view>
                </view>
            </view>
        </view>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</view>
</template>

<script>
import { mapState } from 'vuex'
import { exchangePointVoucher } from '../../../api/homePointsgoods'
import { env } from '../../../static/config'
export default {
  name: 'index',
  data(){
    return {
    dialog:{},
	hongbaobg: env.SITE_URL+'/uploads/home/h5/home/hongbao_bg.png'
    }
  },
  computed: {
    ...mapState({
      isOnline: state => state.member.isOnline,
      token: state => state.member.token
    })
  },
  props: ['item'],
  components: {
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
        exchangePointVoucher({ vid: this.dialog.data.vouchertemplate_id, key: this.token }).then(res => {
			uni.showToast({icon:'none',title: res.message})
        }).catch(error => {
          uni.showToast({icon:'none',title: error.message})
        })
    },
    exchangeVoucher (item) {
      this.dialog={content:'您确定需要使用' + item.vouchertemplate_points + '积分兑换代金券吗？',data:item}
      this.$refs.confirm.open()

    }
  }
}
</script>

<style scoped lang="scss">
    .font-size-activity-tag {font-size:$h6!important;}
    .color-tip { color: #909399!important; }
    .color-base-text {color: #ff4544!important;}
    .img-content >img{width: 100%;height: 100%;}
    .list-wrap-item {display: inline-block;width: 165px;overflow: hidden;position: relative}
    .list-wrap-item.hongbao-list-wrap-item {height: 70px}
    .list-wrap-item .img-box {width: 100%;height: 100%;position: absolute;top: 0;left: 0}
    .list-wrap-item .img-box .img-content {width: 100%;height: 100%}
    .list-wrap-item .content {position: relative;z-index: 9}
    .list-wrap-item .content .coupon {background-size: 100% 100%;background-repeat: no-repeat;border-radius: 5px;display: flex;padding: 10px 0}
    .list-wrap-item .content .coupon .coupon_right {position: relative;width: 70px;min-width: 70px}
    .list-wrap-item .content .coupon .coupon_right.flex {display: flex;align-items: center}
    .list-wrap-item .content .coupon .coupon_right .coupon_btn {margin: 0px auto 0;width: 40px;height: 20px;line-height: 20px;font-size:$fontSize;text-align: center;border-radius: 20px;border-width: 1px;border-style: solid}
    .list-wrap-item .content .coupon .coupon_right .coupon_num {margin-top: 5px;text-align: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center}
    .list-wrap-item .content .coupon .coupon_right::after {position: absolute;top: 0;margin-left: 0;content: "";width: 0;height: 100%;border-left: 1px dashed;opacity: .2}
    .list-wrap-item .content .coupon .coupon_left {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;text-align: left;padding: 0 0 0 10px}
    .list-wrap-item .content .coupon .coupon_left .price {font-size:1.2rem;font-weight: 500;margin-top: 0!important;padding: 0;font-weight: 600}
    .list-wrap-item .content .coupon .coupon_left .price .text-content {font-size:$fontSize}
    .list-wrap-item .content .coupon .coupon_left .coupon_condition {width: 85px;margin-top: 10px;line-height: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
    .list-wrap-item .content .hongbao .coupon_left .price, .list-wrap-item .content .hongbao .coupon_left .coupon_condition {color: #fff}
    .list-wrap-item .content .hongbao .coupon_right .coupon_num {color: #fff}
    .list-wrap-item .content .hongbao .coupon_right .coupon_btn {color: #fff;border-color: #fff}
    .list-wrap-item .content .hongbao .coupon_right::after {position: absolute;top: 0;margin-left: 0;content: "";width: 0;height: 100%;border-left: 0;opacity: .2}
    .list-wrap-item .content .coupon-price-wrap {width: 100%;height: 52px;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between}
    .list-wrap-item .content .coupon-price-wrap .coupon-price {font-size:1.2rem;margin-top: 5px;margin-left: 10px}
    .list-wrap-item .content .coupon-price-wrap .coupon-price .text-content {font-size:$fontSize}
    .list-wrap-item .content .coupon-point .coupon-point-num {width: 80px;height: 22px;position: relative}
    .list-wrap-item .content .coupon-point .coupon-point-num .img-content {width: 100%;height: 100%;position: absolute}
    .list-wrap-item .content .coupon-point .coupon-point-num .text-content {position: relative;z-index: 9;color: #fff;font-size:$fontSize;display: inline-block;width: 100%;line-height: 22px;text-align: center;vertical-align: top}
    .list-wrap-item .content .coupon-point .coupon-conditions {font-size:$h6;color: #909399;line-height: 1;margin-top: 12px}
    .list-wrap-item .content .coupon-name {font-size:$fontSize;color: #303133;margin-top: 11px;line-height: 1;padding: 0 11px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
    .list-wrap-item .content.hongbao-content {background-color: #fff;border-radius: 10px;padding-bottom: 15px}
    .list-wrap-item .content .hongbao-img {height: 165px}
    .list-wrap-item .content .hongbao-img .img-content {width: 100%;height: 100%}
    .list-wrap-item .content .price {font-size:$subFontSize;color: #303133;line-height: 1;padding-left: 13px;margin-top: 10px}
    .list-wrap-item .content .point {font-size:$h2;padding-left: 13px;margin-top: 8px;line-height: 1}
    .list-wrap-item .content .point .text-content {font-size:$fontSize}
    .list-wrap-item .content .stock {font-size:$h6;color: #909399;line-height: 1;padding-left: 13px;margin-top: 10px}
</style>