609 lines
19 KiB
Vue
609 lines
19 KiB
Vue
<template>
|
|
<view>
|
|
<text class="tips" v-if="orderInfo.orderType === 2">该商品自己提供，商品以及配送收益都归自己</text>
|
|
<view class="list" v-if="orderInfo.orderType != 2">
|
|
<text class="title">商家地址</text>
|
|
<view class="flex flex-between">
|
|
<view class="flex flex-column font32">
|
|
<text class="color-b5">{{orderInfo.storeFullName || storeInfo.name}} {{orderInfo.storeMobile || storeInfo.mobile}}</text>
|
|
<text>{{orderInfo.storeThreeAdcode | filterAddr}}{{orderInfo.storeAddressDetails}}{{orderInfo.storeAddressSupplement}}</text>
|
|
</view>
|
|
<view @click="goMap(orderInfo,'business')"><image :src="staticUrl+'user/addr.png'" mode="" class="addr"></image></view>
|
|
</view>
|
|
<view class="flex flex-between icons">
|
|
<view class="flex icons-item" @click="skipToSingleChat(toStoreConversation,3)">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">联系商家</text>
|
|
</view>
|
|
<view class="flex icons-item" @click="makePhoneCall(orderInfo.storeMobile || storeInfo.mobile)">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">致电商家</text>
|
|
</view>
|
|
<view class="flex icons-item" @click="goMap(orderInfo,'business')">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">导航路线</text>
|
|
</view>
|
|
</view>
|
|
<image class="a-bg" :src="staticUrl + 'user/addr_bg.png'"></image>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<text class="title">配送地址</text>
|
|
<view class="flex flex-between">
|
|
<view class="flex flex-column font32">
|
|
<text class="color-b5">{{orderInfo.userFullName}} {{orderInfo.userMobile}}</text>
|
|
<text>{{orderInfo.userThreeAdcode | filterAddr}}{{orderInfo.userAddressDetails}}{{orderInfo.userAddressSupplement}}</text>
|
|
</view>
|
|
<view @click="goMap(orderInfo,'user')"><image :src="staticUrl+'user/addr.png'" mode="" class="addr"></image></view>
|
|
</view>
|
|
<view class="flex flex-between icons">
|
|
<view class="flex icons-item" @click="skipToSingleChat(toUserConversation,2)">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">联系客户</text>
|
|
</view>
|
|
<view class="flex icons-item" @click="makePhoneCall(orderInfo.userMobile)">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">致电客户</text>
|
|
</view>
|
|
<view class="flex icons-item" @click="goMap(orderInfo,'user')">
|
|
<text class="iconfont icon"></text>
|
|
<text class="font26 color-b6">导航路线</text>
|
|
</view>
|
|
</view>
|
|
<image class="a-bg" :src="staticUrl + 'user/addr_bg.png'"></image>
|
|
</view>
|
|
<view class="list">
|
|
<text class="title">商品信息</text>
|
|
<view class="goods">
|
|
<view class="flex flex-align-center store" v-if="orderInfo.storeInfo">
|
|
<image :src="orderInfo.storeInfo.logoImage" mode="" class="img"></image>
|
|
<text class="font32 color-b3">{{orderInfo.storeInfo.name}}</text>
|
|
<text class="iconfont color-b9 font38"></text>
|
|
</view>
|
|
<view class="goods-item">
|
|
<view><image :src="orderInfo.skuImage || orderInfo.goodsImage" mode="" class="pic"></image></view>
|
|
<view class="flex flex-column flex-grow">
|
|
<text class="color-b3 line line-2 font32">{{orderInfo.goodsName}}</text>
|
|
<text class="spec">{{orderInfo.skuName}}</text>
|
|
</view>
|
|
<view class="flex flex-column flex-align-end" style="margin-left: 10rpx;">
|
|
<text class="color-b3 font32">¥{{orderInfo.totalPrice}}</text>
|
|
<text class="color-b9 font26">x{{orderInfo.number}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<text class="title">订单信息</text>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">商品总额：</text>
|
|
<text>¥{{orderInfo.totalPrice}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">预计佣金：</text>
|
|
<text class="blod color-purple">¥{{orderInfo.deliveryPlatformMoney}}</text>
|
|
</view>
|
|
<!-- 普通商品，并且配送员已接单或配送中 -->
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.orderType === 1 && !isHistory && (orderInfo.deliveryPlatformStatus === 3 || orderInfo.deliveryPlatformStatus === 4)">
|
|
<text class="label" v-if="orderInfo.deliveryPlatformStatus === 3">取 货 码：</text>
|
|
<text class="label" v-if="orderInfo.deliveryPlatformStatus === 4">取 消 码：</text>
|
|
<text class="flex-grow">{{orderInfo.deliveryPlatformCode}}</text>
|
|
<text class="color-purple" @click="$onCopy(orderInfo.deliveryPlatformCode.toString())">复制</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">订单类型：</text>
|
|
<text>{{orderInfo.orderType | filterType}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.orderType === 1 && orderInfo.bonusIntegral">
|
|
<text class="label">赠送积分：</text>
|
|
<text>{{orderInfo.bonusIntegral}}%-{{(orderInfo.bonusIntegral*orderInfo.totalPrice).toFixed(2)}}积分</text>
|
|
</view>
|
|
<view class="flex flex-between cell">
|
|
<text class="label">订单编号：</text>
|
|
<text class="flex-grow">{{orderInfo.orderNumber}}</text>
|
|
<text class="color-purple" @click="$onCopy(orderInfo.orderNumber.toString())">复制</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.rmbPayOrderNumber">
|
|
<text class="label">商户单号：</text>
|
|
<text class="flex-grow">{{orderInfo.rmbPayOrderNumber}}</text>
|
|
<text class="color-purple" @click="$onCopy(orderInfo.rmbPayOrderNumber.toString())">复制</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">支付方式：</text>
|
|
<text>{{orderInfo.rmbPayType | filterPayType}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">创建时间：</text>
|
|
<text>{{orderInfo.createTime}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.rmbPayTime">
|
|
<text class="label">付款时间：</text>
|
|
<text>{{orderInfo.rmbPayTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="list" v-if="orderInfo.deliveryPlatformEvaluate">
|
|
<text class="title">评价信息</text>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">商品评分：</text>
|
|
<uni-rate :size="15" :margin="4" :value="orderInfo.goodsEvaluate.evaluateGoodsScore / 2" readonly></uni-rate>
|
|
</view>
|
|
<view class="flex cell">
|
|
<text><text class="label">评价商品：</text>{{orderInfo.goodsEvaluate.evaluateGoodsComment}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<view class="imgs" v-if="orderInfo.goodsEvaluate.evaluateGoodsImages">
|
|
<image :src="item" mode="" class="pic" v-for="(item, index) in orderInfo.goodsEvaluate.evaluateGoodsImages" :key="index" @click="viewImg(orderInfo.goodsEvaluate.evaluateGoodsImages, item)"></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.goodsEvaluate.evaluateDistributionScore">
|
|
<text class="label">配送评分：</text>
|
|
<uni-rate :size="15" :margin="4" :value="orderInfo.goodsEvaluate.evaluateDistributionScore" readonly></uni-rate>
|
|
</view>
|
|
<view class="flex cell" v-if="orderInfo.goodsEvaluate.evaluateDistributionComment">
|
|
<text><text class="label">评价配送：</text>{{orderInfo.goodsEvaluate.evaluateDistributionComment}}</text>
|
|
</view>
|
|
<view class="flex flex-align-center cell" v-if="orderInfo.goodsEvaluate.evaluateDistributionImages">
|
|
<view class="imgs">
|
|
<image :src="item" mode="" class="pic" v-for="(item, index) in orderInfo.goodsEvaluate.evaluateDistributionImages" :key="index" @click="viewImg(orderInfo.goodsEvaluate.evaluateDistributionImages, item)"></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-align-center cell">
|
|
<text class="label">评价时间：</text>
|
|
<text>{{orderInfo.goodsEvaluate.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 占位 -->
|
|
<view style="height: 120rpx;"></view>
|
|
<!-- 操作按钮 -->
|
|
<view class="fixed flex flex-space-end">
|
|
<text class="btn" @click="confirmOrder()" v-if="orderInfo.deliveryPlatformStatus === 1 || orderInfo.deliveryPlatformStatus === 2">确认接单</text>
|
|
<text class="btn" @click="openModal()" v-if="orderInfo.deliveryPlatformStatus !== 5 && orderInfo.deliveryPlatformStatus !== 1">
|
|
取消配送
|
|
</text>
|
|
<text class="btn" @click="confirmPickup()" v-if="orderInfo.deliveryPlatformStatus === 3">确认取货</text>
|
|
<text class="btn" @click="showPopup()" v-if="orderInfo.deliveryPlatformStatus === 4">确认送达</text>
|
|
</view>
|
|
|
|
<!-- 确认送达 -->
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="popup">
|
|
<text class="title">确认送达</text>
|
|
<view class="form">
|
|
<text>确认码</text>
|
|
<input type="number" :maxlength="6" v-model="deliveryPlatformServiceCode" placeholder="请输入" class="flex-wrap color-b6 flex-1" style="margin-left: 20rpx;">
|
|
</view>
|
|
<view class="flex flex-align-center flex-space-around">
|
|
<button type="default" class="btn" @click="closePopup">取消</button>
|
|
<button type="primary" class="btn bg-base" @click="onConfirm">确认</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 取消配送弹框 -->
|
|
<uni-popup ref="canCelPopup" type="dialog">
|
|
<uni-popup-dialog
|
|
mode="input"
|
|
title="取消配送"
|
|
placeholder="取消配送原因"
|
|
@confirm="cancelOrder"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import url from "@/common/http/url.js"
|
|
import publics from "@/common/utils/public.js"
|
|
import selectOptions from "@/common/utils/selectOptions.js"
|
|
import uniRate from "@/components/uni-rate/uni-rate.vue"
|
|
import uniPopup from "@/components/uni-popup/uni-popup.vue"
|
|
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
|
|
import imMix from "../order/imMix.js"
|
|
export default{
|
|
components: {
|
|
uniRate, uniPopup, uniPopupDialog
|
|
},
|
|
mixins: [imMix],
|
|
data(){
|
|
return {
|
|
staticUrl: this.$staticUrl,
|
|
isHistory: false,
|
|
id: "",
|
|
orderUserId: "",
|
|
orderInfo: {},
|
|
storeInfo: {},
|
|
toUserInfo: {},
|
|
toStoreConversation: null,
|
|
toUserConversation: null,
|
|
deliveryPlatformServiceCode: ""
|
|
}
|
|
},
|
|
filters:{
|
|
filterAddr(code) {
|
|
if (!code) return
|
|
return publics.getAddressByThreeCode(code)
|
|
},
|
|
filterPayType(val){
|
|
switch(val){
|
|
case 1:
|
|
return "余额钱包";
|
|
break;
|
|
case 2:
|
|
return "微信";
|
|
break;
|
|
case 3:
|
|
return "支付宝";
|
|
break;
|
|
case 3:
|
|
return "平台卡包";
|
|
break;
|
|
default:
|
|
return "其他";
|
|
}
|
|
},
|
|
filterType(val){
|
|
let value = "其他"
|
|
selectOptions.goodsTypeList.forEach(v => {
|
|
if (v.value === val) {
|
|
value = v.name
|
|
return
|
|
}
|
|
})
|
|
return value
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.id = opt.id
|
|
this.orderUserId = opt.orderUserId
|
|
if (opt.isHistory){
|
|
this.isHistory = true
|
|
}
|
|
this.getInfo()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
getInfo(){
|
|
let path = url.distributor.getOrderDetailsById
|
|
let params = {
|
|
orderId: this.id,
|
|
orderUserId: this.orderUserId
|
|
}
|
|
//历生订单详情
|
|
if (this.isHistory){
|
|
path = url.distributor.historyOrderDetails
|
|
params = {
|
|
id: this.id,
|
|
userId: this.orderUserId
|
|
}
|
|
}
|
|
this.$http("GET", path, params).then(res =>{
|
|
this.orderInfo = res.data.order || res.data
|
|
if (res.data.storeInfo) {
|
|
this.storeInfo = res.data.storeInfo
|
|
}
|
|
if (res.data.toUserInfo) {
|
|
this.toUserInfo = res.data.toUserInfo
|
|
}
|
|
if (res.data.toStoreConversation) {
|
|
this.toStoreConversation = res.data.toStoreConversation
|
|
}
|
|
if (res.data.toUserConversation) {
|
|
this.toUserConversation = res.data.toUserConversation
|
|
}
|
|
uni.stopPullDownRefresh()
|
|
}).catch(()=>{
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
// 确认接单
|
|
confirmOrder(){
|
|
let toImAccount = this.toUserInfo.imAccount
|
|
|
|
//设置会话,加判断是防止自己给自己发信息，是不允许的
|
|
if(this.toUserConversation){
|
|
this.setSessionOperation(this.toUserConversation)
|
|
}
|
|
|
|
this.$http("POST", url.distributor.confirmReceiptOrder, {orderId: this.id}).then((res)=>{
|
|
this.$msg(res.data)
|
|
|
|
// #ifdef APP-PLUS
|
|
if(this.toUserConversation){//加判断是防止自己给自己发信息，是不允许的
|
|
// 发送一条消息，判断对方是否在线
|
|
this.isOtherOnline(toImAccount, "agentConfirm")
|
|
// 发送消息给对方
|
|
let goodsInfo = {
|
|
orderId: this.orderInfo.id,
|
|
goodsId: this.orderInfo.goodsId,
|
|
goodsImage: this.orderInfo.skuImage || this.orderInfo.goodsImage,
|
|
goodsName: this.orderInfo.goodsName,
|
|
skuName: this.orderInfo.skuName,
|
|
price: this.orderInfo.totalPrice,
|
|
number: this.orderInfo.number,
|
|
status: 4, // 1-邀请对方接单，用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
|
|
identity: this.userInfo.imAccount, // 配送配送员的imAccount
|
|
}
|
|
this.sendMsgToOther(toImAccount, goodsInfo, 6, 2, ()=>{
|
|
this.editDBData(goodsInfo.orderId, goodsInfo.status)
|
|
})
|
|
}
|
|
// #endif
|
|
|
|
this.getInfo()
|
|
})
|
|
},
|
|
// 显示取消配送弹框
|
|
openModal(){
|
|
this.$refs.canCelPopup.open()
|
|
},
|
|
// 取消配送
|
|
cancelOrder(done, value){
|
|
if (!value) return this.$msg("请输入取消配送理由")
|
|
let toImAccount = this.toUserInfo.imAccount
|
|
|
|
//设置会话，加判断是防止自己给自己发信息，是不允许的
|
|
if(this.toUserConversation){
|
|
this.setSessionOperation(this.toUserConversation)
|
|
}
|
|
|
|
this.$http("POST", url.distributor.cancelReceiptOrder, {orderId: this.id}).then((res)=>{
|
|
done()
|
|
this.$msg(res.data)
|
|
// #ifdef APP-PLUS
|
|
if(this.toUserConversation){//加判断是防止自己给自己发信息，是不允许的
|
|
// 发送一条消息，判断对方是否在线
|
|
this.isOtherOnline(toImAccount, "agentCancel")
|
|
// 发送消息给对方
|
|
let goodsInfo = {
|
|
orderId: this.orderInfo.id,
|
|
goodsId: this.orderInfo.goodsId,
|
|
goodsImage: this.orderInfo.skuImage || this.orderInfo.goodsImage,
|
|
goodsName: this.orderInfo.goodsName,
|
|
skuName: this.orderInfo.skuName,
|
|
price: this.orderInfo.totalPrice,
|
|
number: this.orderInfo.number,
|
|
status: 3, // 1-邀请对方接单，用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
|
|
identity: this.userInfo.imAccount, // 配送配送员的imAccount
|
|
reason: value
|
|
}
|
|
console.log("goodsInfo==============")
|
|
console.log(goodsInfo)
|
|
this.sendMsgToOther(toImAccount, goodsInfo, 6, 2, ()=>{
|
|
this.editDBData(goodsInfo.orderId, goodsInfo.status)
|
|
})
|
|
}
|
|
// #endif
|
|
|
|
this.getInfo()
|
|
})
|
|
},
|
|
// 确认取货
|
|
confirmPickup(){
|
|
let _this = this
|
|
this.$showModal("是否确认当前商品已取得", "提示", res=>{
|
|
if (res.confirm) {
|
|
_this.$http("POST", url.distributor.confirmPickUp, {orderId: _this.id}).then(()=>{
|
|
_this.getInfo()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 确认送达
|
|
onConfirm(){
|
|
this.closePopup()
|
|
uni.showLoading({
|
|
mask:true
|
|
})
|
|
let params = {
|
|
orderId: this.id,
|
|
deliveryPlatformServiceCode: this.deliveryPlatformServiceCode
|
|
}
|
|
this.$http("POST", url.distributor.confirmService, params).then(res =>{
|
|
uni.hideLoading()
|
|
this.$msg(res.data)
|
|
this.getInfo()
|
|
}).catch(()=>{
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
showPopup(){
|
|
this.$refs.popup.open()
|
|
},
|
|
closePopup(){
|
|
this.$refs.popup.close()
|
|
},
|
|
makePhoneCall(mobile){
|
|
uni.makePhoneCall({phoneNumber: mobile});
|
|
},
|
|
goMap(row, type){
|
|
let lat = row.storeLat
|
|
let lng = row.storeLng
|
|
let address = row.storeAddressDetails + row.storeAddressSupplement
|
|
if (type === "user") {
|
|
lat = row.userLat
|
|
lng = row.userLng
|
|
address = row.userAddressDetails + row.userAddressSupplement
|
|
}
|
|
uni.openLocation({
|
|
latitude:lat,
|
|
longitude:lng,
|
|
address: address
|
|
})
|
|
},
|
|
viewImg(list, img){
|
|
uni.previewImage({
|
|
urls: list,
|
|
current:img
|
|
})
|
|
},
|
|
/**
|
|
* 创建会话，并且存储会话到本地后，最后进入会话
|
|
* @param {String} conversation 会话信息
|
|
* @param {Number} type 会话类型 1-用户 2-配送员 3-商家
|
|
* */
|
|
skipToSingleChat(conversation, type) {
|
|
if(conversation){
|
|
//设置会话
|
|
this.setSessionOperation(conversation)
|
|
//进入会话
|
|
this.$navigateTo('/pages/interaction/im-chat?pages=message&&id='+conversation.toImAccount+"&&type="+type+"&&isCustomer=false&&listIndex=0&&toConversationId="+conversation.toConversationId)
|
|
}else{
|
|
this.$msg("不允许自己与自己发送消息")
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tips{
|
|
background-color: rgba($color: #F8D247, $alpha: 0.3);
|
|
color: #F8D247;
|
|
padding: 10rpx 20rpx;
|
|
font-size: 26rpx;
|
|
width: 710rpx;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.list{
|
|
background-color: white;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
.title{
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border-left: 8rpx solid #F8D247;
|
|
padding-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
.a-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 5upx;
|
|
}
|
|
.icons{
|
|
margin-top: 20rpx;
|
|
&-item{
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.icon{
|
|
margin-bottom: 10rpx;
|
|
font-size: 46rpx;
|
|
color: #F8D247;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.addr{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.goods{
|
|
.store{
|
|
margin-bottom: 30rpx;
|
|
.img{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
&-item{
|
|
display: flex;
|
|
.pic{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.spec{
|
|
background-color: #F8F8F8;
|
|
color: #bcbbbd;
|
|
font-size: 24rpx;
|
|
padding: 10rpx;
|
|
margin-top: 4rpx;
|
|
border-radius: 8rpx;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
}
|
|
.cell{
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
.label{
|
|
width: 160rpx;
|
|
}
|
|
.note{
|
|
width: 500rpx;
|
|
}
|
|
.imgs{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 10rpx;
|
|
.pic{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.fixed{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
background-color: #FFFFFF;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
.btn{
|
|
font-size: 26rpx;
|
|
border: 2rpx solid #F8D247;
|
|
padding: 10rpx 26rpx;
|
|
border-radius: 50rpx;
|
|
margin-right: 20rpx;
|
|
color: #F8D247;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
.popup{
|
|
background-color: white;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
padding: 20rpx;
|
|
.title{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
padding-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.form{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 40rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
padding-bottom: 20rpx;
|
|
color: #333333;
|
|
}
|
|
.btn{
|
|
width: 40%;
|
|
}
|
|
}
|
|
</style>
|