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.
376 lines
8.8 KiB
376 lines
8.8 KiB
<template>
|
|
|
|
<!-- 选择类别 -->
|
|
<wybPopup ref="popup" @hide="hide" type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="true">
|
|
<!-- 货品 -->
|
|
<view v-if="keywords == 'goods'" class="pop-contain pd-main">
|
|
<view class="pop-title fontwig6"><text>商品列表</text></view>
|
|
<view class="pop-content">
|
|
<view class="flex-row bottom-border pd15">
|
|
<view class="">
|
|
数量
|
|
</view>
|
|
<view class="">
|
|
共{{getNumberAll}}件
|
|
</view>
|
|
</view>
|
|
<!-- 遍历商品 -->
|
|
<view v-for="(item,index) in goodsList" :key="index" class="goods-pop bottom-border pd15">
|
|
<view class="">
|
|
<image class="st-img" v-if="item.img" :src="imageUrl + item.img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="goods-flex1">
|
|
<view class="marb10 font16">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="flex-row">
|
|
<view v-if="yhqId == 0 || yhqId == null" class="dis-flex">
|
|
<view class="fcorred">
|
|
¥{{item.price}}
|
|
</view>
|
|
<view class="text-lt fcor666 margle10">
|
|
¥{{item.originalPrice}}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="dis-flex">
|
|
<view class="fcorred">
|
|
¥{{item.originalPrice}}
|
|
</view>
|
|
<!-- <view class="text-lt fcor666 margle10">
|
|
¥{{item.originalPrice}}
|
|
</view> -->
|
|
</view>
|
|
<view class="fcor666">
|
|
×{{item.num}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 运费 -->
|
|
<view v-if="keywords == 'freight'" class="pop-contain pd-main">
|
|
<view class="pop-title fontwig6"><text>运费说明</text></view>
|
|
<view class="pop-content">
|
|
<view class="flex-row pd10">
|
|
<view class="font16">
|
|
运费总计
|
|
</view>
|
|
<view class="">
|
|
¥{{postPriceAll}}
|
|
</view>
|
|
</view>
|
|
<view class="flex-row font14 color999 marb5">
|
|
<view class="">
|
|
<text class="font20 paddtright5">·</text>运费
|
|
</view>
|
|
<view class="">
|
|
¥{{postPrice.freightPrice}}
|
|
</view>
|
|
</view>
|
|
<view class="flex-row font14 color999">
|
|
<view class="">
|
|
<text class="font20 paddtright5">·</text>运费优惠
|
|
</view>
|
|
<view class="fcorred">
|
|
商品金额满{{postPrice.freePostPrice}}元包邮
|
|
</view>
|
|
</view>
|
|
|
|
<view class="font16 color999 mart10">
|
|
不同城市、地区之间收费规则会略有不同。
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 积分 -->
|
|
<view v-if="keywords == 'integral'" class="pop-contain pd-main">
|
|
|
|
<view class="pop-title fontwig6"><text>积分说明</text></view>
|
|
<view class="pop-content">
|
|
<view class="flex-row pd10">
|
|
<view class="font16">
|
|
运费总计
|
|
</view>
|
|
<view class="">
|
|
¥0
|
|
</view>
|
|
</view>
|
|
<view class="flex-row font14 color999 marb5">
|
|
<view class="">
|
|
<text class="font20 paddtright5">·</text>运费
|
|
</view>
|
|
<view class="">
|
|
¥6
|
|
</view>
|
|
</view>
|
|
<view class="flex-row font14 color999">
|
|
<view class="">
|
|
<text class="font20 paddtright5">·</text>运费优惠
|
|
</view>
|
|
<view class="">
|
|
-¥6
|
|
</view>
|
|
</view>
|
|
<view class="pd10">
|
|
<view class="font15">
|
|
基础运费
|
|
</view>
|
|
</view>
|
|
<view class="font14 color999 marb5">
|
|
基础运费6元
|
|
</view>
|
|
<view class="font14 color999 marb5">
|
|
不同城市、地区之间收费规则会略有不同。
|
|
</view>
|
|
<view class="font14 color999 marb5">
|
|
运费优惠仅针对基础运费部分进行抵扣;
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券 -->
|
|
<view v-if="keywords == 'coupon'" class="backcor9 pop-contain pd-main">
|
|
<view class="pop-title fontwig6"><text>选择优惠券</text></view>
|
|
<radio-group @change="radioChange" >
|
|
<view class="dis-flex flex-sp fcor666 pd-main mart10 border-8r backcolorfff">
|
|
<view class="">
|
|
不使用优惠券
|
|
</view>
|
|
<view class="">
|
|
<radio class="radio-ca" :checked="yhqType == 0" :value="0" color="#FF1A34" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-for="(item,index) in discountList" :key="index" class="pd-main mart10 border-8r backcolorfff" style="box-sizing: border-box;">
|
|
<view class="dis-flex flex-sp ">
|
|
<view class="wid25 fotct paddtright5 right-border">
|
|
<view class="fotred font20 fontwig6">
|
|
<image class="st-img" v-if="item.discountImg" :src="imageUrl+item.discountImg" mode="aspectFill">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="flex-1 paddleft5">
|
|
<view :class="' font14 '+item.discountCondition<=totalPrice?' ':' fcor666 '">
|
|
{{item.discountName}}
|
|
</view>
|
|
<view class="font13 mart5 fcor666">
|
|
截止时间:{{item.useEndTime | formatDate }}
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="item.discountCondition<=totalPrice">
|
|
|
|
<radio class="radio-ca" :checked="yhqType == item.id" :value="item.id" color="#FF1A34" />
|
|
|
|
</view>
|
|
</view>
|
|
<view v-if="item.discountCondition>totalPrice&&item.discountType == 1" class="paddtop10 mart10 border-t font14">
|
|
<view class="fotred fontwig6 ">不可用原因</view>
|
|
<view class="fcor666">
|
|
使用门槛为{{item.discountCondition}}元，还差{{item.discountCondition-totalPrice}}元才能使用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</radio-group>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</wybPopup>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
|
|
const app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageUrl: app.globalData.imgUrl, //图片地址
|
|
keywords: '',
|
|
//
|
|
|
|
// yhqId: [
|
|
// 111, 222, 333, 444
|
|
// ],
|
|
//
|
|
|
|
goodsList: [],//商品列表
|
|
imageUrl: app.globalData.imgUrl, //图片地址
|
|
postPrice: null, //运费信息
|
|
|
|
discountList:[],//优惠券信息
|
|
totalPrice:0,//商品总金额
|
|
yhqType: 0,//选择的优惠券id
|
|
yhqId:0,
|
|
|
|
}
|
|
},
|
|
filters:{
|
|
formatDate(value, spe = '/') {
|
|
let data = new Date(value);
|
|
let year = data.getFullYear();
|
|
let month = data.getMonth() + 1;
|
|
let day = data.getDate();
|
|
let h = data.getHours();
|
|
let mm = data.getMinutes();
|
|
let s = data.getSeconds();
|
|
month = month >= 10 ? month : "0" + month;
|
|
day = day >= 10 ? day : "0" + day;
|
|
h = h >= 10 ? h : "0" + h;
|
|
mm = mm >= 10 ? mm : "0" + mm;
|
|
s = s >= 10 ? s : "0" + s;
|
|
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
|
|
},
|
|
},
|
|
computed: {
|
|
getNumberAll() {
|
|
if (this.goodsList.length > 0) {
|
|
let num = 0;
|
|
this.goodsList.map(item => {
|
|
num += Number(item.num);
|
|
})
|
|
|
|
return num;
|
|
} else {
|
|
return 0
|
|
}
|
|
|
|
},
|
|
//计算运费
|
|
postPriceAll() {
|
|
if (this.postPrice) {
|
|
if (this.postPrice.totalPrice >= this.postPrice.freePostPrice) {
|
|
return 0
|
|
} else {
|
|
return this.postPrice.freightPrice;
|
|
}
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
wybPopup
|
|
},
|
|
methods: {
|
|
|
|
// //goods货品， freight运费,integral积分,coupon优惠券
|
|
show(str, data,yhqID) {
|
|
|
|
this.goodsList = [];
|
|
this.postPrice = null;
|
|
this.discountList = [];
|
|
this.totalPrice = 0;
|
|
this.yhqId = 0;
|
|
|
|
this.keywords = str;
|
|
if (str == 'goods') {
|
|
this.yhqId = yhqID;
|
|
console.log(this.yhqId,"this.yhqId")
|
|
this.goodsList = data;
|
|
} else if (str == 'freight') {
|
|
this.postPrice = data;
|
|
console.log(this.postPrice, "obj")
|
|
}else if(str == 'coupon'){
|
|
this.discountList =data.discountList//优惠券信息
|
|
this.totalPrice =data.totalPrice //商品总金额
|
|
|
|
}
|
|
|
|
this.$refs.popup.show();
|
|
},
|
|
radioChange(e) {
|
|
this.yhqType = e.detail.value;
|
|
this.$refs.popup.close()
|
|
},
|
|
// 关闭的时候弹射方法
|
|
hide() {
|
|
this.$emit('selectYhq',this.yhqType)
|
|
},
|
|
// noUse() {
|
|
// this.yhqType = 0
|
|
// this.$refs.popup.close();
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom-border {
|
|
border-bottom: 1px solid #f6f6f6;
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.right-border {
|
|
border-right: 1px dotted #EEEEEE;
|
|
|
|
}
|
|
|
|
.pd10 {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.pd15 {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.fotred {
|
|
color: #FF1A34;
|
|
}
|
|
|
|
.pop-contain {
|
|
// text-align: center;
|
|
padding-top: 50px;
|
|
|
|
.pop-title {
|
|
text-align: center;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
// 商品
|
|
.goods-pop {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.goods-flex1 {
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.st-img {
|
|
width: 82px;
|
|
height: 82px;
|
|
}
|
|
// 优惠券
|
|
.radio-ca {
|
|
// width: 20rpx;
|
|
// height: 20rpx;
|
|
}
|
|
</style>
|
|
|