Skip to content

C
center-shop-show-h5
提交 409caec2 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

style: 修改购买弹窗CSS样式

上级 09c56a33
显示空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 61 行删除
src/components/TagSelection.vue
浏览文件 @ 409caec2
......@@ -71,7 +71,7 @@ export default {
display: flex;
flex-wrap: wrap;
span{
margin: 0 0.15rem 0.2rem 0.15rem;
margin: 0 0.15rem 0.2rem 0;
padding:4px 10px;
background: #F5F5F5;
color:#4D4D4D;
......
src/pages/buy/components/BuyPopup.vue
浏览文件 @ 409caec2
<template>
<van-popup v-model="popupVisiable" position="bottom" class="buy-popup" :style="{ height: '60%' }" >
<van-popup v-model="popupVisiable" position="bottom" class="buy-popup" :style="{ height: '60%' }">
<div class="goods-card van-hairline--bottom">
<div class="thumb">
<img :src="thumb">
<img :src="thumb" />
</div>
<div class="content">
<div class="price">￥<span>{{price}}</span></div>
<p class="surplus">剩余 {{surplus}}</p>
<div class="price">
￥<span>{{ price }}</span>
</div>
<p class="surplus">剩余 {{ surplus }}</p>
</div>
<van-field :label="spec_title" class="tag-item">
</div>
<van-field :label="spec_title" class="tag-item is-vertical">
<template #input>
<tag-selection v-model="spec" :data="specList" :options="{ label: 'spec_values', value: 'sku_id'}" @currentSelected="handleTagSelected"/>
<tag-selection
v-model="spec"
:data="specList"
:options="{ label: 'spec_values', value: 'sku_id' }"
@currentSelected="handleTagSelected"
/>
</template>
</van-field>
<van-form :show-error="false" @submit="handleSuccess">
<van-field name="count" label="购买数量">
<template #input>
<div class="space-bt">
<span style="color:#B4B4B4;"></span>
<span style="color: #b4b4b4"></span>
<van-stepper v-model="form.count" />
</div>
</template>
</van-field>
<van-field v-for="item in fieldsMap" v-model="form[item.key]" :key="item.key" :name="item.key" :label="item.label" :type="item.type" :placeholder="item.placeholder" :rules="[{ required: item.required, message: item.placeholder }, { validator: item.validator, message: item.errorMsg || '输入格式有误' }]">
<van-field
v-for="item in fieldsMap"
v-model="form[item.key]"
:key="item.key"
:name="item.key"
:label="item.label"
:type="item.type"
:placeholder="item.placeholder"
:rules="[
{ required: item.required, message: item.placeholder },
{ validator: item.validator, message: item.errorMsg || '输入格式有误' }
]"
class="is-vertical"
>
<template #input v-if="item.type === 'image'">
<app-upload v-model="form[item.key]" :max-count="1"></app-upload>
</template>
</van-field>
<div style="margin: 16px;">
<div style="margin: 16px">
<van-button type="primary" round block color="#C01540" size="small">下一步</van-button>
</div>
</van-form>
<van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button getContainer="body" @confirm="handleDialogConfirm">
<van-dialog
v-model="dialogVisiable"
title="请选择支付方式"
show-cancel-button
getContainer="body"
@confirm="handleDialogConfirm"
>
<van-radio-group v-model="payType">
<van-radio name="12">支付宝支付</van-radio>
<van-radio name="4">微信支付</van-radio>
......@@ -73,17 +99,20 @@ export default {
},
fieldsMap: {},
validatorMap: {
phone: (val) => {
phone: val => {
if (val === '') return true
return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val);
return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val)
},
email: (val) => {
email: val => {
if (val === '') return true
return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val);
return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val)
},
idCard: (val) => {
idCard: val => {
if (val === '') return true
return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) || /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
return (
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) ||
/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
)
}
},
dialogVisiable: false,
......@@ -96,10 +125,10 @@ export default {
query() {
return this.$route.query
},
spu_id () {
spu_id() {
return this.query.spu_id || '6805043172159258624'
},
shop_id () {
shop_id() {
return this.query.shop_id || '6800681447305773056'
}
},
......@@ -221,58 +250,65 @@ export default {
}
</script>
<style lang="scss" scoped>
.buy-popup{
box-sizing:border-box;
.is-vertical {
flex-direction: column;
::v-deep .van-field__label {
width: auto;
margin-right: 0;
}
}
.buy-popup {
box-sizing: border-box;
}
.goods-card{
position:relative;
box-sizing:border-box;
padding:2.6vw 0 2.6vw 30vw;
height:26vw;
margin:0 0.24rem 10px;
border-radius:3px;
.thumb{
width:26vw;
height:26vw;
position:absolute;
left:0;
top:0;
img{
width:80%;
display:block;
margin:10% auto;
.goods-card {
position: relative;
box-sizing: border-box;
padding: 2.6vw 0 2.6vw 30vw;
height: 26vw;
margin: 0 0.24rem 10px;
border-radius: 3px;
.thumb {
width: 26vw;
height: 26vw;
position: absolute;
left: 0;
top: 0;
img {
width: 80%;
display: block;
margin: 10% auto;
}
}
.content{
display:flex;
flex-direction:column;
height:100%;
padding-right:10px;
.price{
color:#C01540;
font-size:12px;
line-height:0.64rem;
flex:1;
span{
font-size:0.4rem;
.content {
display: flex;
flex-direction: column;
height: 100%;
padding-right: 10px;
.price {
color: #c01540;
font-size: 12px;
line-height: 0.64rem;
flex: 1;
span {
font-size: 0.4rem;
}
}
.surplus{
line-height:0.64rem;
color:#B4B4B4;
.surplus {
line-height: 0.64rem;
color: #b4b4b4;
}
}
}
.tag-item{
display:block;
::v-deep.van-field__value{
margin-top:8px;
.tag-item {
display: block;
::v-deep.van-field__value {
margin-top: 8px;
}
}
.van-radio-group{
padding:0.4rem;
.van-radio{
padding:0.2rem;
.van-radio-group {
padding: 0.4rem;
.van-radio {
padding: 0.2rem;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论