4 changed files with 832 additions and 29 deletions
@ -0,0 +1,796 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-box" v-if="product"> |
|||
<view class="product-title">{{ product.title }}</view> |
|||
<view class="product-date">{{ selectDate.date }}</view> |
|||
<view class="product-num"> |
|||
<text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.sku_name }}x{{ item.num }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="user-box"> |
|||
<view class="user-box-title">出行人信息</view> |
|||
|
|||
<view v-for="(skuItem, skuIndex) in sku" :key="skuIndex"> |
|||
<view class="user-item" v-for="(item, index) in skuItem.num" :key="index"> |
|||
<text class="user-item-text">{{ skuItem.sku_name }}</text> |
|||
|
|||
<view v-if="linkmans[skuIndex][index]" class="user-info"> |
|||
<text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text> |
|||
<text>{{ linkmans[skuIndex][index].tel }}</text> |
|||
</view> |
|||
|
|||
<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" /> |
|||
|
|||
<view @tap="showLinkman(skuIndex)" v-else class="add-btn"> |
|||
+ 添加 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="user-item"> |
|||
<text class="user-item-text">姓名</text> |
|||
<input v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/> |
|||
</view> --> |
|||
<view class="user-item"> |
|||
<text class="user-item-text">联系电话</text> |
|||
<input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/> |
|||
<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="user-item" style="border-bottom: none"> |
|||
<text class="user-item-text">订单备注</text> |
|||
<input type="text" v-model="remark" placeholder="选填" class="user-input"/> |
|||
</view> |
|||
</view> |
|||
|
|||
<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between"> |
|||
<text>优惠券</text> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view class="add-btn" v-if="!coupon">选择优惠券</view> |
|||
<view style="display: flex;align-items: center;color: #C3282E;font-weight: bold;" v-if="coupon && coupon.CouponActivity"> |
|||
<view>-¥{{coupon.CouponActivity.discounts/100}}</view> |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon"> |
|||
</view> |
|||
</navigator> |
|||
|
|||
<!-- <view class="xy-box"> |
|||
<view class="quan flex-center" @click="clickXy"> |
|||
<view class="quan-seld" v-if="xySeld"></view> |
|||
</view> |
|||
<view style="margin-left: 20rpx;"> |
|||
请您仔细阅读<span @click="openXz">线路标准退预定须知</span>,点击去支付即代表您已阅读条款内容 |
|||
</view> |
|||
</view> --> |
|||
|
|||
<view class="fixed-bottom"> |
|||
<view class="order-all-price"> |
|||
合计: |
|||
<text class="order-all-text"> |
|||
¥{{ priceTotal() / 100 }} |
|||
</text> |
|||
</view> |
|||
<view class="order-btn" @tap="order">去支付</view> |
|||
</view> |
|||
|
|||
<!-- 协议弹框 --> |
|||
<!-- <uni-popup ref="popup" type="bottom" :safe-area="false"> |
|||
<view class="xzPopup"> |
|||
<view v-html="formateRichText(product.reserve_content)"></view> |
|||
<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup"> |
|||
</view> |
|||
</uni-popup> --> |
|||
|
|||
<!-- 添加出行人弹窗 --> |
|||
<uni-popup ref="peoplePopup" type="bottom" backgroundColor="#F4F4F4"> |
|||
<view class="people-popup"> |
|||
<view class="popup-top"> |
|||
<view class="top flex-between"> |
|||
<text class="text-overflow" @click="changePeoplePopup('close')"></text> |
|||
<text class="confirm" @click="changePeoplePopup('')">确定</text> |
|||
</view> |
|||
</view> |
|||
<navigator url="/subPackages/user/myContactsAdd?type=add" class="button">添加出行人</navigator> |
|||
<view class="popup-list" v-if="peopleList.length>0"> |
|||
<view :class="['popup-item', {'people-select': item.is_seld}]" v-for="(item,index) in peopleList" :key="index" @click="seldThisPeople(item, index)"> |
|||
<view class="item-top flex-between"> |
|||
<navigator :url="`/subPackages/user/myContactsAdd?type=edit&id=${item.id}`"><img |
|||
src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" class="editImg"> |
|||
</navigator> |
|||
<view class="name">{{ item.name }}</view> |
|||
<view class="subtitle"> |
|||
<view class="mobile">手机号 {{ item.tel }} <span v-if="item.is_default==1">默认</span></view> |
|||
<view class="idCard">{{ item.title }} {{ item.id_number }}</view> |
|||
</view> |
|||
<!-- <view class="status" :class="item.is_seld?'statuss':'noSelect'" |
|||
@click="seldThisPeople(item, index)"> |
|||
<img src="https://static.ticket.sz-trip.com/taihu/images/user/dui.png" |
|||
v-if="item.is_seld" class="selectImg"> |
|||
</view> --> |
|||
</view> |
|||
<!-- <view class="item-site" @click="changeDefaultPeople(item,index)"> |
|||
<view class="flex-around" v-if="item.is_default==1"> |
|||
<view></view> |
|||
</view> |
|||
<view v-else></view> |
|||
设为默认出行人 |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
product: this.$store.state.user.lineInfo.product, |
|||
sku: this.$store.state.user.lineInfo.sku, |
|||
selectDate: this.$store.state.user.lineInfo.selectDate, |
|||
linkmans: [], |
|||
sku_ids: '', |
|||
price: this.$store.state.user.lineInfo.price, |
|||
skuIndex: null, |
|||
coupon: '', |
|||
reserve_name: '', |
|||
reserve_phone: '', |
|||
reserve_mobile: '', |
|||
remark: '', |
|||
peopleList: [], |
|||
linkmanList: [], |
|||
xySeld: false |
|||
} |
|||
}, |
|||
onReady() { |
|||
console.log('product',this.product) |
|||
console.log('sku',this.sku) |
|||
console.log('selectDate',this.selectDate) |
|||
console.log('price',this.price) |
|||
// 清除优惠券 |
|||
this.$store.commit("choseCoupon", ""); |
|||
// 自动获取手机号 |
|||
this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile || '' |
|||
|
|||
this.initLinkmansAndSkuIds(); |
|||
}, |
|||
onShow() { |
|||
this.coupon = this.$store.state.user.coupon |
|||
console.log('传过来的优惠券',this.coupon); |
|||
|
|||
this.getPeople() |
|||
}, |
|||
methods: { |
|||
// 初始化出行人信息和商品规格 ID 数组 |
|||
initLinkmansAndSkuIds() { |
|||
let linkmans = []; |
|||
let sku_ids = []; |
|||
this.sku.forEach((item) => { |
|||
const num = Number(item.num); |
|||
linkmans.push(new Array(num)); |
|||
sku_ids.push(item.id); |
|||
}); |
|||
this.linkmans = linkmans; |
|||
this.sku_ids = sku_ids; |
|||
}, |
|||
// 协议 |
|||
clickXy() { |
|||
this.xySeld = !this.xySeld |
|||
}, |
|||
openXz() { |
|||
this.$refs.popup.open('bottom') |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
// 去支付 |
|||
order() { |
|||
let flag = true |
|||
let product_list = []; |
|||
this.sku.map((item, index) => { |
|||
if(item.num > 0) { |
|||
let linkmanArray = this.linkmans[index] || [] |
|||
let linkman = linkmanArray.filter(i => i); |
|||
if(linkman.length < item.num) { |
|||
flag = false |
|||
uni.showToast({ |
|||
title: '请选择对应的出行人', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let pId = [] |
|||
linkman.map(lItem => { |
|||
pId.push(lItem.id) |
|||
}) |
|||
product_list.push({ |
|||
type: 'line', |
|||
sku_id: item.id, |
|||
product_id: this.product.id, |
|||
product_num: item.num, |
|||
visitors: pId.toString(), |
|||
reserve_mobile: this.reserve_mobile, |
|||
use_date: this.selectDate.date |
|||
}); |
|||
} |
|||
}) |
|||
|
|||
// if(!this.idChinaName(this.reserve_name)) { |
|||
// flag = false |
|||
// uni.showToast({ |
|||
// title: '请输入联系人', |
|||
// icon: 'none' |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
if(!this.IsTel(this.reserve_phone)) { |
|||
flag = false |
|||
uni.showToast({ |
|||
title: '请输入联系方式', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// if(!this.xySeld) { |
|||
// flag = false |
|||
// uni.showToast({ |
|||
// title: '请先同意预订须知内容', |
|||
// icon: 'none' |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
if(flag){ |
|||
let data = { |
|||
product_list: product_list, |
|||
coupon_id: this.coupon ? this.coupon.id : null, |
|||
remark: this.remark |
|||
}; |
|||
|
|||
this.Post({ |
|||
data: JSON.stringify(data), |
|||
method: 'POST', |
|||
},'/api/order/create').then(res => { |
|||
console.log(res) |
|||
return; |
|||
if(res.code == 1) { |
|||
let order_id = res.data.order_id |
|||
this.$store.commit("changeLineInfo", null); |
|||
this.$store.commit("choseCoupon", ""); |
|||
|
|||
this.Post({ |
|||
order_id: order_id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
}, '/api/pay/unify').then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp, |
|||
success: () => { |
|||
this.getSubscribeMessage() |
|||
}, |
|||
fail() { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
// 总价 |
|||
priceTotal() { |
|||
let price = 0 |
|||
if(this.coupon) { |
|||
if (this.coupon.percent == 0) { |
|||
price = this.price - this.coupon.CouponActivity.discounts |
|||
} else{ |
|||
price = this.price - (this.price * this.coupon.CouponActivity.percent/100) |
|||
} |
|||
}else { |
|||
price = this.price |
|||
} |
|||
return price < 0 ? 0 : price |
|||
}, |
|||
// 获取出行人列表 |
|||
getPeople() { |
|||
this.Post({ |
|||
contactType: 'CONTACT', |
|||
offset: 0, |
|||
limit: 100 |
|||
},'/api/uservice/user/getContactOrConsignee').then(res => { |
|||
this.peopleList = res.data |
|||
this.reserve_mobile = this.peopleList[0].tel |
|||
// 如果是添加或者修改完出行人后需要默认选中已选择的出行人 |
|||
if (this.linkmanList.length > 0) { |
|||
this.linkmanList.forEach((linkman) => { |
|||
const foundIndex = this.peopleList.findIndex((people) => people.id === linkman.id); |
|||
if (foundIndex !== -1) { |
|||
this.linkmanList[foundIndex] = this.peopleList[foundIndex]; |
|||
this.peopleList[foundIndex].is_seld = true; |
|||
this.linkmanList[foundIndex].is_seld = true; |
|||
} |
|||
}); |
|||
this.$forceUpdate(); |
|||
} |
|||
}) |
|||
}, |
|||
// 设置默认出行人 |
|||
changeDefaultPeople(item, index) { |
|||
if (item.is_default == 1) { |
|||
return |
|||
} |
|||
this.Post({ |
|||
contactId: item.id |
|||
},'/api/uservice/user/setDefaultContact').then(res => { |
|||
if(res.code == 200){ |
|||
uni.showToast({ |
|||
title: '设置成功', |
|||
icon: 'none' |
|||
}); |
|||
for (let item of this.peopleList) item.is_default = 0 |
|||
this.peopleList[index].is_default = 1 |
|||
} |
|||
this.$forceUpdate() |
|||
}) |
|||
}, |
|||
// 选择出行人弹框 |
|||
showLinkman(skuIndex) { |
|||
this.skuIndex = skuIndex |
|||
|
|||
this.peopleList.map(item => { |
|||
if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) { |
|||
item.is_disable = true |
|||
}else { |
|||
item.is_disable = false |
|||
} |
|||
}) |
|||
|
|||
this.$refs.peoplePopup.open('bottom') |
|||
this.$forceUpdate() |
|||
}, |
|||
// 选择出行人 |
|||
seldThisPeople(item,index) { |
|||
let num = 0 |
|||
let list = [] |
|||
|
|||
if(item.is_seld && item.is_disable) { |
|||
uni.showToast({ |
|||
title: '该联系人已选择为其他规格', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
this.linkmans[this.skuIndex] = [] |
|||
this.peopleList.map(items => { |
|||
if(items.id == item.id) { |
|||
items.is_seld = !items.is_seld |
|||
} |
|||
if(items.is_seld && !items.is_disable) { |
|||
num++; |
|||
items.is_sku = this.sku[this.skuIndex].id |
|||
this.linkmans[this.skuIndex].push(items) |
|||
} |
|||
if(items.is_seld) { |
|||
this.linkmanList.push(item) |
|||
} |
|||
}) |
|||
if(num > this.sku[this.skuIndex].num) { |
|||
item.is_seld = false |
|||
this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1) |
|||
uni.showToast({ |
|||
title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
this.$forceUpdate() |
|||
console.log(this.peopleList,this.linkmans) |
|||
}, |
|||
// 确定取消 |
|||
changePeoplePopup(type,confirm) { |
|||
this.$refs.peoplePopup.close() |
|||
this.$forceUpdate() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
background: #f6f6f6; |
|||
padding-bottom: 200rpx; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.top-box { |
|||
padding: 30rpx 47rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
border-bottom: 1rpx solid #ccc; |
|||
|
|||
.product-title { |
|||
color: #000000; |
|||
font-size: 33rpx; |
|||
line-height: 47rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.product-num { |
|||
margin-top: 30rpx; |
|||
|
|||
.product-text { |
|||
margin-right: 50rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.user-box { |
|||
margin: 25rpx; |
|||
background: #ffffff; |
|||
border-radius: 9rpx; |
|||
|
|||
.user-box-title { |
|||
// border-bottom: 1rpx solid #ccc; |
|||
line-height: 113rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.user-item { |
|||
margin: 0 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 126rpx; |
|||
border-top: 1rpx solid #B8B8B8; |
|||
|
|||
.user-item-text{ |
|||
flex-shrink: 0; |
|||
font-size: 31rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.user-info { |
|||
font-size: 27rpx; |
|||
margin-right: 20rpx; |
|||
flex: 1; |
|||
text-align: left; |
|||
} |
|||
|
|||
.icon-bianji1 { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.add-btn { |
|||
display: flex; |
|||
width: 153rpx; |
|||
height: 57rpx; |
|||
border: 1rpx solid #333333; |
|||
border-radius: 29rpx; |
|||
box-sizing: border-box; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.user-input { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
display: block; |
|||
text-align: right; |
|||
} |
|||
|
|||
.icon-coupon{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.people-popup { |
|||
padding: 26rpx; |
|||
min-height: 800rpx; |
|||
|
|||
.top-box { |
|||
height: 80rpx; |
|||
|
|||
.top { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
color: #000; |
|||
height: 80rpx; |
|||
font-size: 0; |
|||
overflow: hidden; |
|||
padding: 0 26rpx; |
|||
|
|||
text { |
|||
text-align: left; |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
|
|||
.confirm { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-list { |
|||
height: 666rpx; |
|||
overflow: scroll; |
|||
|
|||
.popup-item { |
|||
border-radius: 12rpx; |
|||
padding: 10rpx 20rpx; |
|||
margin-top: 24rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: 400; |
|||
background-color: #FFFFFF; |
|||
|
|||
.item-top { |
|||
padding: 20rpx 12rpx; |
|||
|
|||
img { |
|||
color: #666666; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
margin: 0 20rpx; |
|||
overflow: hidden; |
|||
|
|||
text { |
|||
color: #999999; |
|||
margin: 0 20rpx; |
|||
} |
|||
|
|||
.tag { |
|||
border-radius: 8rpx; |
|||
text-align: center; |
|||
color: #333333; |
|||
font-size: 20rpx; |
|||
padding: 6rpx 15rpx; |
|||
background-color: #FFC825; |
|||
} |
|||
} |
|||
|
|||
.com-flex-start { |
|||
margin: 0 0 30rpx; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-weight: 400; |
|||
flex: 1; |
|||
text-align: left; |
|||
|
|||
.mobile { |
|||
margin-bottom: 36rpx; |
|||
|
|||
span { |
|||
margin-left: 10rpx; |
|||
padding: 0 7rpx; |
|||
line-height: 31rpx; |
|||
background: #6A8A27; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.status { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 27rpx; |
|||
height: 21rpx; |
|||
} |
|||
} |
|||
|
|||
.statuss { |
|||
background: linear-gradient(90deg, #FA2B66, #FF9834); |
|||
border: none; |
|||
} |
|||
|
|||
.noSelect { |
|||
border: 1rpx solid #999999; |
|||
} |
|||
} |
|||
|
|||
.item-site { |
|||
color: #666666; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 36rpx 0; |
|||
|
|||
view { |
|||
width: 23rpx; |
|||
height: 23rpx; |
|||
margin-right: 10rpx; |
|||
border: 1rpx solid #999999; |
|||
border-radius: 50%; |
|||
|
|||
view { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
background: #000000; |
|||
border-radius: 50%; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.people-select { |
|||
border: 2rpx solid #6A8A27; |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 113rpx; |
|||
background: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 26rpx; |
|||
box-sizing: border-box; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
z-index: 1; |
|||
|
|||
.order-all-price { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
|
|||
.order-all-text { |
|||
flex: 1; |
|||
font-size: 36rpx; |
|||
color: #C3282E; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.order-btn { |
|||
width: 293rpx; |
|||
background: #C3282E; |
|||
border-radius: 43rpx; |
|||
text-align: center; |
|||
line-height: 87rpx; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.xy-box { |
|||
width: 658rpx; |
|||
margin: 36rpx auto 0; |
|||
font-size: 27rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #999999; |
|||
display: flex; |
|||
|
|||
span { |
|||
color: #FEB419; |
|||
} |
|||
|
|||
.quan { |
|||
min-width: 23rpx; |
|||
min-height: 23rpx; |
|||
max-width: 23rpx; |
|||
max-height: 23rpx; |
|||
border: 1px solid #999999; |
|||
border-radius: 50%; |
|||
|
|||
.quan-seld { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #FEB419; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.xzPopup { |
|||
width: 750rpx; |
|||
padding: 33rpx 26rpx 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
height: 1200rpx; |
|||
overflow-y: scroll; |
|||
|
|||
view { |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 35rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
position: absolute; |
|||
top: 33rpx; |
|||
right: 27rpx; |
|||
} |
|||
} |
|||
|
|||
.coupon-box { |
|||
height: 113rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
padding: 0 20rpx; |
|||
margin: 0 20rpx; |
|||
|
|||
.add-btn { |
|||
width: 153rpx; |
|||
line-height: 40rpx; |
|||
background: #C3282E; |
|||
border-radius: 9rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.icon-coupon{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
</style> |
Loading…
Reference in new issue