15 changed files with 769 additions and 25 deletions
-
4src/components/site/order_modal/order_modal.vue
-
11src/pages.json
-
96src/pages/site/confirm/confirm.vue
-
7src/pages/site/manage/manage.vue
-
276src/subpackage/common/components/card_search.vue
-
9src/subpackage/common/js/api.js
-
10src/subpackage/common/js/server.js
-
374src/subpackage/common/pages/pay_type_select.vue
-
BINsrc/subpackage/common/static/images/choose.png
-
BINsrc/subpackage/common/static/images/ic_0.png
-
BINsrc/subpackage/common/static/images/ic_1.png
-
BINsrc/subpackage/common/static/images/ic_2.png
-
BINsrc/subpackage/common/static/images/ic_3.png
-
BINsrc/subpackage/common/static/images/ic_4.png
-
1src/subpackage/retail/components/store_card_select/store_card_select.vue
@ -0,0 +1,276 @@ |
|||||
|
<template> |
||||
|
<view class="content" v-if="show"> |
||||
|
<view class="win-mask"></view> |
||||
|
|
||||
|
<view class="win-operate"> |
||||
|
<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image> |
||||
|
<text class="win-title">请选择储值卡</text> |
||||
|
|
||||
|
<view class="win-card"> |
||||
|
<view class="win-card-search"> |
||||
|
<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
||||
|
<input v-model="searchCardValue" @change="searchCardList" placeholder="请输入微信昵称/手机号码/储值卡号搜索" placeholder-style="win-card-search-input-placeholder"> |
||||
|
</view> |
||||
|
<view class="win-card-list"> |
||||
|
<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)" :style="{borderColor:item.mark===choosePath?'#009874':'#979797'}"> |
||||
|
<view>储值卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view> |
||||
|
<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view> |
||||
|
<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view> |
||||
|
<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view> |
||||
|
<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view> |
||||
|
<image mode="aspectFit" :src="item.mark"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view> |
||||
|
<view class="win-iphonex-block"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util.js'; |
||||
|
import server from '../js/server'; |
||||
|
import api from '../js/api'; |
||||
|
|
||||
|
export default { |
||||
|
props: [ |
||||
|
"show", "price", "storeId", "brandId" |
||||
|
], |
||||
|
data() { |
||||
|
return { |
||||
|
cardList: [], // 储值卡列表 |
||||
|
choosePath: "/static/images/icon/retail/choose.png", |
||||
|
noChoosePath: "/static/images/icon/retail/noChoose.png", |
||||
|
curCardChoose: null, |
||||
|
searchCardValue: "", |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 储值卡点击 |
||||
|
onCardClick(item) { |
||||
|
this.curCardChoose = item; |
||||
|
for (let i = 0; i < this.cardList.length; ++i) this.cardList[i].mark = this.noChoosePath; |
||||
|
this.curCardChoose.mark = this.choosePath; |
||||
|
}, |
||||
|
// 获取储值卡列表 |
||||
|
searchCardList() { |
||||
|
if (!this.searchCardValue) { |
||||
|
this.cardList = []; |
||||
|
this.curCardChoose = null; |
||||
|
// util.showNone("请输入微信昵称/手机号码/储值卡号搜索"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let _this = this; |
||||
|
this.cardList = []; |
||||
|
|
||||
|
util.showLoad(); |
||||
|
server.get({ |
||||
|
url: api.assistantGetValueCardList, |
||||
|
data: { |
||||
|
brand_id: this.brandId, |
||||
|
stadium_id: this.storeId, |
||||
|
total_amount: this.price, |
||||
|
key: this.searchCardValue, |
||||
|
}, |
||||
|
isDefaultGet: false, |
||||
|
failMsg: '搜索失败！' |
||||
|
}).then(res => { |
||||
|
util.hideLoad(); |
||||
|
if (res.data.code == 0) { |
||||
|
let color = "#333"; |
||||
|
for (let i = 0; i < res.data.data.length; ++i) { |
||||
|
_this.cardList.push(res.data.data[i]); |
||||
|
_this.cardList[i].mark = this.noChoosePath; |
||||
|
_this.cardList[i].color = { |
||||
|
card_no: color, nickname: color, mobile: color, card_name: color, balance: color |
||||
|
}; |
||||
|
|
||||
|
for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j) |
||||
|
_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "#009874"; |
||||
|
} |
||||
|
|
||||
|
if (_this.cardList.length) { |
||||
|
_this.cardList[0].mark = _this.choosePath; |
||||
|
this.curCardChoose = _this.cardList[0]; |
||||
|
} |
||||
|
else { |
||||
|
util.showNone("查询不到该储值卡信息，请检查重新输入"); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
util.showNone(res.data.message || '操作失败！'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 重置数据 |
||||
|
resetData() { |
||||
|
this.curCardChoose = null; |
||||
|
this.cardList = []; |
||||
|
this.searchCardValue = ""; |
||||
|
}, |
||||
|
// 关闭窗口 |
||||
|
onClose() { |
||||
|
this.$emit("update:onClose", false); |
||||
|
}, |
||||
|
// 支付确定 |
||||
|
onConfirm() { |
||||
|
if (!this.curCardChoose) { |
||||
|
util.showNone("请搜索选择储值卡！"); |
||||
|
return; |
||||
|
} |
||||
|
this.$emit("update:onConfirm", this.curCardChoose); |
||||
|
this.onClose(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.content { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.win-mask { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
.win-operate { |
||||
|
width: 100%; |
||||
|
height: 964rpx; |
||||
|
position: fixed; |
||||
|
bottom: 0%; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-direction: column; |
||||
|
background-color: white; |
||||
|
padding-top: 46rpx; |
||||
|
|
||||
|
> image { |
||||
|
width: 34rpx; |
||||
|
height: 34rpx; |
||||
|
position: absolute; |
||||
|
top: 32rpx; |
||||
|
right: 28rpx; |
||||
|
} |
||||
|
> text { |
||||
|
width: 100%; |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
text-align: center; |
||||
|
margin-bottom: 54rpx; |
||||
|
} |
||||
|
.win-way-confirm { |
||||
|
width: 100%; |
||||
|
padding: 0 20rpx; |
||||
|
position: absolute; |
||||
|
bottom: 0%; |
||||
|
bottom: calc( 0% + constant(safe-area-inset-bottom)); |
||||
|
bottom: calc( 0% + env(safe-area-inset-bottom)); |
||||
|
|
||||
|
> button { |
||||
|
width: 100%; |
||||
|
height: 112rpx; |
||||
|
line-height: 112rpx; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 0 0; |
||||
|
color: white; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
.win-iphonex-block { |
||||
|
background-color: white; |
||||
|
width: 100%; |
||||
|
height: constant(safe-area-inset-bottom); |
||||
|
height: env(safe-area-inset-bottom); |
||||
|
poisition: absolute; |
||||
|
bottom: 0%; |
||||
|
} |
||||
|
.win-card { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-direction: column; |
||||
|
padding: 0 20rpx; |
||||
|
|
||||
|
.win-card-search { |
||||
|
width: 100%; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #f2f2f7; |
||||
|
margin-bottom: 30rpx; |
||||
|
@include centerFlex(flex-start); |
||||
|
|
||||
|
> image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
> input { |
||||
|
font-size: 32rpx; |
||||
|
padding: 24rpx 20rpx; |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
.win-card-search-input-placeholder { |
||||
|
font-size: 32rpx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
} |
||||
|
.win-card-list { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
overflow: scroll; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-direction: column; |
||||
|
flex-grow: 1; |
||||
|
position: relative; |
||||
|
margin-bottom: 112rpx; |
||||
|
|
||||
|
.win-card-list-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex-shrink: 0; |
||||
|
width: 100%; |
||||
|
border: 2rpx solid #979797; |
||||
|
border-color: #979797; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 20rpx 0; |
||||
|
margin-bottom: 24rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
> view { |
||||
|
color: #9c9c9f; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 5rpx; |
||||
|
|
||||
|
> text { |
||||
|
color: #333; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> image { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 20rpx; |
||||
|
transform: translate(0%, -50%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,9 @@ |
|||||
|
import { ORIGIN } from '../../../js/api'; |
||||
|
|
||||
|
export const COMMON_API = { |
||||
|
assistantGetValueCardList:`${ORIGIN}/admin/assistant/getValueCardList`, // 搜索储蓄卡
|
||||
|
takeUpBbocPay:`${ORIGIN}/admin/stadium/venue/takeUpBbocPay`, // 挂账收款的接口
|
||||
|
venueTakeUp: `${ORIGIN}/admin/stadium/venue/takeUp`, // 商家助手-占用场地提交
|
||||
|
} |
||||
|
|
||||
|
export default COMMON_API; |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { Server } from '../../../js/server'; |
||||
|
|
||||
|
class CommonServer extends Server { |
||||
|
constructor(props){ |
||||
|
super(props) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default new CommonServer(); |
||||
@ -0,0 +1,374 @@ |
|||||
|
<template> |
||||
|
<view class="pay-type-select"> |
||||
|
<view class="pts-header"> |
||||
|
<view class="ph-stadium-info"> |
||||
|
<image mode="aspectFill" :src="stadiumInfo.logo"></image> |
||||
|
<view>{{ stadiumInfo.name || '-' }}</view> |
||||
|
</view> |
||||
|
<view class="ph-type-text">订场支付金额</view> |
||||
|
<view class="ph-price"><text>¥</text>{{ optionsQuery.amount || 0 }}</view> |
||||
|
<view class="ph-discount-tip"> |
||||
|
<block v-if="payMethodsID == 3"><text>原价：¥99，</text>折扣金额¥9.9</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="pts-container"> |
||||
|
<view class="pc-tit-bar">支付方式</view> |
||||
|
<view class="pc-ls"> |
||||
|
<view class="pl-item" v-for="(e, i) in payMethodsLs" :key="i"> |
||||
|
<image mode="aspectFit" :src="'/subpackage/common/static/images/ic_'+e.id+'.png'"></image> |
||||
|
<view class="pi-right" @click="payMethodsChange(e)"> |
||||
|
<view class="pr-top"> |
||||
|
<view class="pr-txt">{{ e.name || '-' }}</view> |
||||
|
<view class="pr-ipt" v-if="e.id == 4"> |
||||
|
<input v-model="otherTypeRemark" /> |
||||
|
</view> |
||||
|
<view :class="['pr-icon', e.id == payMethodsID? 'active': '']"> |
||||
|
<image mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="pr-content" v-if="e.id == 3"> |
||||
|
<view class="pc-line"> |
||||
|
<view class="pl-txt">储值卡卡号：230316000</view> |
||||
|
<view class="pl-tag">使用会员卡支付9折</view> |
||||
|
</view> |
||||
|
<view class="pc-line"> |
||||
|
<view class="pl-txt">微信昵称：LLL</view> |
||||
|
</view> |
||||
|
<view class="pc-line"> |
||||
|
<view class="pl-txt">手机号码：13711029033</view> |
||||
|
</view> |
||||
|
<view class="pc-line"> |
||||
|
<view class="pl-txt">卡名称：1000元送200元卡</view> |
||||
|
</view> |
||||
|
<view class="pc-line"> |
||||
|
<view class="pl-txt">卡余额：￥1050</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<cover-view class="sc-fixed-bot"> |
||||
|
<cover-view |
||||
|
class="sfb-view" |
||||
|
hover-class="hover-active" |
||||
|
@click="submitBtn" |
||||
|
>立即支付</cover-view> |
||||
|
</cover-view> |
||||
|
<storeCardSelect |
||||
|
:show="isCardSearchModalShow" |
||||
|
@update:onClose="isCardSearchModalShow = false" |
||||
|
@update:onConfirm="true" |
||||
|
> |
||||
|
</storeCardSelect> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import server from '../js/server.js'; |
||||
|
import API from '../js/api.js'; |
||||
|
import util from '../../../utils/util.js'; |
||||
|
import storeCardSelect from '../components/card_search'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'storeCardSelect': storeCardSelect |
||||
|
}, |
||||
|
computed: { |
||||
|
stadiumInfo(){ |
||||
|
return this?.optionsQuery?.stadiumInfo || {}; |
||||
|
}, |
||||
|
exQuery(){ |
||||
|
return this?.optionsQuery?.exQuery || {}; |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isCardSearchModalShow: false, |
||||
|
payMethodsLs: this.getPayMethodsLs(), |
||||
|
payMethodsID: 0, |
||||
|
optionsQuery: {}, |
||||
|
otherTypeRemark: '', |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* @param {Object} _options = JSON.parse(decodeURIComponent(option.query)) |
||||
|
* @param {String} _options.type 1 -> 客户订场， 2-> 散客， 3-> 锁场, 4 -> 挂账 |
||||
|
* @param {String} _options.brand_id |
||||
|
* @param {String} _options.amount |
||||
|
* @param {Object} _options.stadiumInfo |
||||
|
* @param {String} _options.stadiumInfo.id |
||||
|
* @param {String} _options.stadiumInfo.name |
||||
|
* @param {String} _options.stadiumInfo.logo |
||||
|
* |
||||
|
* @param {Object} _options.exQuery // 拓展参数 |
||||
|
* |
||||
|
* |
||||
|
*/ |
||||
|
onLoad(option){ |
||||
|
let optionsQuery = util.jsonPar(decodeURIComponent(option.query)); |
||||
|
this.optionsQuery = optionsQuery; |
||||
|
console.warn(optionsQuery) |
||||
|
}, |
||||
|
methods: { |
||||
|
submitBtn: util.debounce(function(){ |
||||
|
let _type = this.optionsQuery?.type; |
||||
|
if(+_type === 4)return this.takeUpBbocPay(); |
||||
|
if(_type !== 4)return this.takeUpSubmit(); |
||||
|
|
||||
|
}, 300, true), |
||||
|
payMethodsChange(e){ |
||||
|
if(e.id == 3)this.isCardSearchModalShow = true; |
||||
|
this.payMethodsID = e.id; |
||||
|
}, |
||||
|
getPayMethodsLs(){ |
||||
|
return [ |
||||
|
{ name: '微信支付', id: 0 }, |
||||
|
{ name: '支付宝支付', id: 1 }, |
||||
|
{ name: '现金支付', id: 2 }, |
||||
|
{ name: '储值卡支付', id: 3 }, |
||||
|
{ name: '其他', id: 4 }, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
// 挂账订单支付提交 |
||||
|
takeUpBbocPay(){ |
||||
|
let { optionsQuery, payMethodsID, otherTypeRemark } = this; |
||||
|
let _data = { |
||||
|
brand_id: optionsQuery.brand_id || '', |
||||
|
amount: optionsQuery.amount || '', |
||||
|
reason: optionsQuery?.exQuery?.reason || '', |
||||
|
order_no: optionsQuery?.exQuery?.order_no || '', |
||||
|
take_up_pay_type: payMethodsID |
||||
|
} |
||||
|
if(payMethodsID === 4)_data['remark'] = otherTypeRemark || '其它'; |
||||
|
server.post({ |
||||
|
url: API.takeUpBbocPay, |
||||
|
data: _data, |
||||
|
failMsg: '操作失败！' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.showNone('操作成功！'); |
||||
|
setTimeout(_=>{ |
||||
|
util.routeTo(); |
||||
|
}, 1200); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 1 -> 客户订场， 2-> 散客， 3-> 锁场, 提交 |
||||
|
takeUpSubmit(){ |
||||
|
let { exQuery, payMethodsID, otherTypeRemark } = this; |
||||
|
let _data = { |
||||
|
...exQuery, |
||||
|
take_up_pay_type: payMethodsID || '' |
||||
|
} |
||||
|
if(payMethodsID === 4)_data['remark'] = otherTypeRemark || '其它'; |
||||
|
util.showLoad(); |
||||
|
server.post({ |
||||
|
url: API.venueTakeUp, |
||||
|
data: _data, |
||||
|
isDefaultGet: false |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
util.hideLoad(); |
||||
|
if(res.data.code == 0){ |
||||
|
util.showNone(res.data.message || '操作成功！'); |
||||
|
let _res = res.data.data || {}; |
||||
|
let _qrStr = `?brand_id=${_res.brand_id}&order_no=${_res.order_no}` |
||||
|
util.routeTo(`/pages/site/occupy_success/occupy_success${_qrStr}`, 'rT'); |
||||
|
}else{ |
||||
|
util.showNone(res.data.message || '操作失败！'); |
||||
|
} |
||||
|
}) |
||||
|
.catch(util.hideLoad) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~style/public.scss'; |
||||
|
.pay-type-select{ |
||||
|
padding-bottom: 120rpx; |
||||
|
padding-bottom: calc( 120rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 120rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
} |
||||
|
.pts-header{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 26upx 36upx 110upx; |
||||
|
background-color: #fff; |
||||
|
.ph-stadium-info{ |
||||
|
padding-bottom: 34upx; |
||||
|
border-bottom: 1px solid #D8D8D8; |
||||
|
@include centerFlex(flex-start); |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10upx; |
||||
|
width: 30upx; |
||||
|
height: 30upx; |
||||
|
} |
||||
|
>view{ |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
.ph-type-text{ |
||||
|
margin-top: 76upx; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.ph-price{ |
||||
|
margin-top: 84upx; |
||||
|
text-align: center; |
||||
|
font-size: 80upx; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
font-size: 60upx; |
||||
|
} |
||||
|
} |
||||
|
.ph-discount-tip{ |
||||
|
margin-top: 16upx; |
||||
|
text-align: center; |
||||
|
line-height: 44upx; |
||||
|
min-height: 44upx; |
||||
|
font-size: 28upx; |
||||
|
color: #FF873D; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
color: #181818; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.pts-container{ |
||||
|
|
||||
|
background-color: #fff; |
||||
|
.pc-tit-bar{ |
||||
|
padding-left: 24upx; |
||||
|
line-height: 72upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
.pc-ls{ |
||||
|
padding: 16upx 30upx 0; |
||||
|
.pl-item{ |
||||
|
display: flex; |
||||
|
&:not(:last-child){ |
||||
|
.pi-right{ |
||||
|
border-bottom: 1px solid #D8D8D8; |
||||
|
} |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 16upx; |
||||
|
width: 54upx; |
||||
|
height: 54upx; |
||||
|
transform: translateY(24upx); |
||||
|
} |
||||
|
.pi-right{ |
||||
|
flex-grow: 1; |
||||
|
.pr-top{ |
||||
|
width: 100%; |
||||
|
height: 102upx; |
||||
|
@include centerFlex(space-between); |
||||
|
.pr-txt{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #181818; |
||||
|
} |
||||
|
.pr-ipt{ |
||||
|
margin-left: 40upx; |
||||
|
margin-right: auto; |
||||
|
padding: 0 16upx; |
||||
|
width: 340upx; |
||||
|
height: 64upx; |
||||
|
border: 2upx solid #D8D8D8; |
||||
|
border-radius: 10upx; |
||||
|
>input{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #181818; |
||||
|
} |
||||
|
} |
||||
|
.pr-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 36upx; |
||||
|
height: 36upx; |
||||
|
border-radius: 50%; |
||||
|
border: 2upx solid #aaaaaa; |
||||
|
overflow: hidden; |
||||
|
@include centerFlex(center); |
||||
|
&.active{ |
||||
|
border-color: transparent; |
||||
|
>image{ |
||||
|
visibility: visible; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
>image{ |
||||
|
visibility: hidden; |
||||
|
display: block; |
||||
|
border: none; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.pr-content{ |
||||
|
padding-top: 4upx; |
||||
|
padding-bottom: 30upx; |
||||
|
.pc-line{ |
||||
|
@include centerFlex(flex-start); |
||||
|
.pl-txt{ |
||||
|
line-height: 44upx; |
||||
|
font-size: 24upx; |
||||
|
color: #181818; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.pl-tag{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
padding: 0 6upx; |
||||
|
line-height: 28upx; |
||||
|
font-size: 24upx; |
||||
|
color: #FF873D; |
||||
|
border: 1px solid #FF873D; |
||||
|
border-radius: 4upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.sc-fixed-bot{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
padding-top: 10upx; |
||||
|
padding-bottom: 10upx; |
||||
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
background-color: #fff; |
||||
|
.sfb-view{ |
||||
|
margin: 0 auto; |
||||
|
width: 702upx; |
||||
|
height: 88upx; |
||||
|
line-height: 88upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
background-color: #FF873D; |
||||
|
color: #fff; |
||||
|
border-radius: 44upx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 36 | Height: 36 | Size: 392 B |
|
After Width: 54 | Height: 54 | Size: 659 B |
|
After Width: 54 | Height: 54 | Size: 627 B |
|
After Width: 52 | Height: 52 | Size: 1.3 KiB |
|
After Width: 52 | Height: 52 | Size: 764 B |
|
After Width: 54 | Height: 54 | Size: 1.3 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue