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.
274 lines
6.0 KiB
274 lines
6.0 KiB
2 years ago
|
<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="">
|
||
|
|
共16件
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 遍历商品 -->
|
||
|
|
<view v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" class="goods-pop bottom-border pd15">
|
||
|
|
<view class="">
|
||
|
|
<image class="st-img" :src="images" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="goods-flex1">
|
||
|
|
<view class="marb10 font16">
|
||
|
|
天友原味减糖活性乳酸菌饮品 300ml
|
||
|
|
</view>
|
||
|
|
<view class="flex-row">
|
||
|
|
<view class="fcorred">
|
||
|
|
¥5.2
|
||
|
|
</view>
|
||
|
|
<view class="fcor666">
|
||
|
|
×1
|
||
|
|
</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="">
|
||
|
|
¥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 == '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 height100 pop-contain pd-main">
|
||
|
|
<view class="pop-title fontwig6"><text>选择优惠券</text></view>
|
||
|
|
|
||
|
|
<view @click="noUse" class="fcor666 fotct pd-main mart10 border-8r backcolorfff">
|
||
|
|
不使用优惠券
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<radio-group @change="radioChange">
|
||
|
|
<view v-for="(item,index) in yhqId" :key="item" class="dis-flex flex-sp pd-main mart10 border-8r backcolorfff">
|
||
|
|
<view class="wid25 fotct paddtright5 right-border">
|
||
|
|
<view class="fotred font20 fontwig6">
|
||
|
|
8.8折券
|
||
|
|
</view>
|
||
|
|
<view class="font13 mart5 fcor666">
|
||
|
|
最高抵10元
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-1 paddleft5">
|
||
|
|
<view class="font14">
|
||
|
|
【新人专享】全品类可用(特殊商品除外)
|
||
|
|
</view>
|
||
|
|
<view class="font13 mart5 fcor666">
|
||
|
|
2023.03.27-2023.04.10
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<radio class="radio-ca" :checked="yhqType == item" :value="item" color="#FF1A34" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</radio-group>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
</wybPopup>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
images:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",
|
||
|
|
keywords:'',
|
||
|
|
yhqType:111,
|
||
|
|
yhqId:[
|
||
|
|
111,222,333,444
|
||
|
|
],
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components:{
|
||
|
|
wybPopup
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
|
||
|
|
// //goods货品， freight运费,integral积分,coupon优惠券
|
||
|
|
show(str){
|
||
|
|
this.keywords = str;
|
||
|
|
this.$refs.popup.show();
|
||
|
|
},
|
||
|
|
radioChange(e){
|
||
|
|
this.yhqType = e.detail.value;
|
||
|
|
console.log(this.yhqType)
|
||
|
|
},
|
||
|
|
hide(){
|
||
|
|
console.log(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;
|
||
|
|
.st-img{
|
||
|
|
width: 82px;
|
||
|
|
height: 82px;
|
||
|
|
}
|
||
|
|
.goods-flex1{
|
||
|
|
flex: 1;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 优惠券
|
||
|
|
.radio-ca{
|
||
|
|
// width: 20rpx;
|
||
|
|
// height: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|