909 lines
22 KiB
Vue
909 lines
22 KiB
Vue
<template>
|
||
<view class="deliver-goods">
|
||
<header class="header">
|
||
<view class="order-num">
|
||
<view class="num line1">订单号：{{ order_id }}</view>
|
||
<!-- <view class="name line1">
|
||
<span class="iconfont icon-yonghu2"></span>{{ delivery.nickname }}
|
||
</view> -->
|
||
</view>
|
||
<view class="address">
|
||
<view class="name">
|
||
<text class="iconfont icon-ic_location4"></text>
|
||
{{ delivery.real_name }}
|
||
<text class="phone">{{ delivery.user_phone }}</text>
|
||
</view>
|
||
<view>地址：{{ delivery.user_address }}</view>
|
||
</view>
|
||
<view class="line">
|
||
<image src="@/static/images/line.jpg" />
|
||
</view>
|
||
</header>
|
||
<view class="wrapper">
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>发货方式</view>
|
||
<view class="mode acea-row row-middle row-right">
|
||
<template v-for="(item, index) in types">
|
||
<view v-if="item.show" class="goods" :class="(active === index || productType==3) ? 'on' : ''" :key="index" @click="changeType(item, index)">
|
||
<text :class="['iconfont', active === index ? 'icon-ic_Selected' : 'icon-ic_unselect']"></text>
|
||
{{ item.title }}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<block v-if="logistics.length>0">
|
||
<view class="list" v-show="active === 0">
|
||
<view class="item acea-row row-middle" v-if="delivery.config_export_open == 1">
|
||
<view>发货类型</view>
|
||
<view class="mode acea-row row-middle row-right">
|
||
<view class="goods" :class="curExpress === item.key ? 'on' : ''" v-for="(item, index) in expressType" :key="index" @click="changeExpTpe(item, index)">
|
||
<text :class="['iconfont', curExpress === item.key ? 'icon-ic_Selected' : 'icon-ic_unselect']"></text>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="curExpress == 1">
|
||
<view class="item acea-row row-middle">
|
||
<view>快递公司</view>
|
||
<view class="select-box">
|
||
<picker class="pickerBox" @change="bindPickerChange" :value="seIndex" :range="logistics" range-key="name">
|
||
<view class="uni-input">{{logistics[seIndex].name}}</view>
|
||
</picker>
|
||
</view>
|
||
<text class="iconfont icon-ic_rightarrow"></text>
|
||
</view>
|
||
<view class="item acea-row row-middle">
|
||
<view>快递单号</view>
|
||
<input type="text" placeholder="请输入" v-model="delivery_id" class="mode" />
|
||
<!-- #ifdef MP -->
|
||
<text class="iconfont icon-xiangji" @click="scanCode"></text>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<text v-if="isWeixin" class="iconfont icon-xiangji" @click="scanCode"></text>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="item">
|
||
<view class="trip" v-if="curExpress == 1">顺丰请输入单号 :收件人或寄件人手机号后四位</view>
|
||
<view class="trip" v-if="curExpress == 1">例如：SF000000000000:3941</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="curExpress == 2">
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>寄件人姓名：</view>
|
||
<input type="text" placeholder="填写寄件人姓名" v-model="to_name" class="mode" />
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>寄件人电话：</view>
|
||
<input type="text" placeholder="填写寄件人电话" v-model="to_tel" class="mode" />
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>寄件人地址：</view>
|
||
<input type="text" placeholder="填写寄件人地址" v-model="to_addr" class="mode" />
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>快递公司</view>
|
||
<view class="select-box">
|
||
<picker class="pickerBox" @change="bindPickerChange" :value="seIndex" :range="logistics" range-key="name">
|
||
<!-- <view></view> -->
|
||
<view class="uni-input">{{logistics[seIndex].name}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper" v-if="expTemp.length>0">
|
||
<view>电子面单</view>
|
||
<view class="picker-add">
|
||
<picker class="pickerBox" @change="bindTempChange" :value="expIndex" :range="expTemp" range-key="title">
|
||
<view class="uni-input">{{expTemp[expIndex].title}}</view>
|
||
</picker>
|
||
<view class="look" @click="previewImage">预览</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
|
||
<view class="list" v-show="active === 1">
|
||
<view class="item acea-row row-between-wrapper">
|
||
<view>送货人</view>
|
||
<view class="select-box" v-if="postPeople.length>0">
|
||
<picker class="pickerBox" @change="bindPostChange" :value="postIndex" :range="postPeople" range-key="wx_name">
|
||
<view class="acea-row row-middle">
|
||
<view class="uni-input">{{postPeople[postIndex].wx_name}}</view>
|
||
<text class="iconfont icon-ic_rightarrow"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper" v-if="postPeople[postIndex]">
|
||
<view>手机号</view>
|
||
<view class="select-box acea-row row-middle row-right">{{postPeople[postIndex].phone}}</view>
|
||
</view>
|
||
</view>
|
||
<textarea v-show="active === 2" v-model="fictitious_content" class="textarea" @blur="bindTextAreaBlur" placeholder="备注" :maxlength="500" auto-height />
|
||
</view>
|
||
<view class="split-wrapper" v-if="totalNum>1">
|
||
<view class="split-switch acea-row row-between-wrapper">
|
||
<view>分单发货</view>
|
||
<!-- <view class="mode acea-row row-middle row-right">
|
||
<view class="goods" :class="curGoods === item.key ? 'on' : ''" v-for="(item, index) in orderGoods" :key="item.key" @click="changeGoods(item)">
|
||
{{ item.title }}<span class="iconfont icon-xuanzhong2"></span>
|
||
</view>
|
||
</view> -->
|
||
<view class="switch" :class="{ on: curGoods }" @click="changeGoods"></view>
|
||
</view>
|
||
<splitOrder :select_all="false" :splitGoods="splitGoods" @getList="getList" v-if="curGoods"></splitOrder>
|
||
</view>
|
||
<view class="height-add"></view>
|
||
<view class="confirm-wrapper">
|
||
<view class="confirm" @click="saveInfo">确认提交</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getStoreOrderDelivery,
|
||
getAdminOrderDelivery,
|
||
setStoreOrderDelivery,
|
||
setAdminOrderDelivery,
|
||
getLogistics,
|
||
storeOrderExportTemp,
|
||
orderExportTemp,
|
||
storeOrderDeliveryInfo,
|
||
orderDeliveryInfo,
|
||
storeOrderDelivery,
|
||
orderOrderDelivery,
|
||
storeOrderSplitInfo,
|
||
orderSplitInfo,
|
||
storeOrderSplitDelivery,
|
||
orderSplitDelivery
|
||
} from "@/api/admin";
|
||
import splitOrder from '@/components/splitOrder';
|
||
export default {
|
||
name: "GoodsDeliver",
|
||
components: {
|
||
splitOrder
|
||
},
|
||
props: {},
|
||
data: function() {
|
||
return {
|
||
types: [{
|
||
type: "express",
|
||
title: "发货",
|
||
key: 1,
|
||
show: true,
|
||
},
|
||
{
|
||
type: "send",
|
||
title: "送货",
|
||
key: 2,
|
||
show: true,
|
||
},
|
||
{
|
||
type: "fictitious",
|
||
title: "无需物流",
|
||
key: 3,
|
||
show: true,
|
||
}
|
||
],
|
||
expressType: [{
|
||
title: '手动填写',
|
||
key: 1
|
||
},
|
||
{
|
||
title: '电子面单打印',
|
||
key: 2
|
||
},
|
||
],
|
||
orderGoods: [{
|
||
title: '开启',
|
||
key: 1
|
||
},
|
||
{
|
||
title: '关闭',
|
||
key: 0
|
||
}
|
||
],
|
||
curExpress: 1,
|
||
active: 0,
|
||
order_id: "",
|
||
delivery: [],
|
||
logistics: [],
|
||
delivery_type: "1",
|
||
delivery_name: "",
|
||
delivery_id: "",
|
||
seIndex: 0,
|
||
expIndex: 0,
|
||
expTemp: [], // 快递模板
|
||
to_name: '', // 发货人名称
|
||
to_tel: '', // 发货人电话
|
||
to_addr: "", // 发货人地址
|
||
postPeople: [], //配送人
|
||
postIndex: 0,
|
||
fictitious_content: '',
|
||
listId: 0,
|
||
curGoods: 0,
|
||
splitGoods: [],
|
||
cartIds: [],
|
||
totalNum: 0,
|
||
productType: 0,
|
||
storeNum:1,
|
||
// #ifdef H5
|
||
isWeixin: this.$wechat.isWeixin()
|
||
// #endif
|
||
};
|
||
},
|
||
watch: {
|
||
"$route.params.oid": function(newVal) {
|
||
let that = this;
|
||
if (newVal != undefined) {
|
||
that.order_id = newVal;
|
||
that.getIndex();
|
||
}
|
||
}
|
||
},
|
||
onLoad: function(option) {
|
||
this.storeNum = parseInt(option.storeNum);
|
||
this.order_id = option.id;
|
||
this.listId = option.listId;
|
||
this.totalNum = option.totalNum;
|
||
this.comeType = option.comeType;
|
||
this.productType = option.productType
|
||
if (this.productType == 3) {
|
||
// this.types.splice(0, 2);
|
||
for (let i = 0; i < this.types.length; i++) {
|
||
if (i == 2) {
|
||
this.types[i].show = true;
|
||
} else {
|
||
this.types[i].show = false;
|
||
}
|
||
}
|
||
this.delivery_type = 3;
|
||
this.active = 2;
|
||
}
|
||
if (option.orderStatus == 8 || option.orderStatus == 4 || option.orderStatus == 9) {
|
||
this.curGoods = 1;
|
||
this.orderGoods.pop();
|
||
this.splitList();
|
||
}
|
||
this.getIndex();
|
||
this.getLogistics();
|
||
this.orderDeliveryInfo()
|
||
this.geTorderOrderDelivery()
|
||
},
|
||
methods: {
|
||
getList(val) {
|
||
let that = this;
|
||
that.splitGoods = val;
|
||
let cartIds = [];
|
||
val.forEach((item) => {
|
||
if (item.checked) {
|
||
let i = {
|
||
cart_id: item.cart_id,
|
||
cart_num: item.surplus_num
|
||
}
|
||
cartIds.push(i)
|
||
}
|
||
})
|
||
this.cartIds = cartIds;
|
||
},
|
||
splitList() {
|
||
let funApi = '';
|
||
if(this.storeNum){
|
||
funApi = orderSplitInfo;
|
||
}else{
|
||
funApi = storeOrderSplitInfo;
|
||
}
|
||
funApi(this.listId).then(res => {
|
||
let list = res.data;
|
||
list.forEach((item) => {
|
||
item.checked = false
|
||
item.numShow = item.surplus_num
|
||
})
|
||
this.splitGoods = list;
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
// 点击获取拆单列表
|
||
changeGoods() {
|
||
this.curGoods = this.curGoods ? 0 : 1;
|
||
if (this.curGoods) {
|
||
this.splitList();
|
||
}
|
||
},
|
||
// 扫描快递单号一维码
|
||
scanCode() {
|
||
// #ifdef MP
|
||
let that = this;
|
||
uni.scanCode({
|
||
scanType: ['barCode'],
|
||
success(res) {
|
||
that.delivery_id = res.result;
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
if (this.$wechat.isWeixin()) {
|
||
this.$wechat.wechatEvevt('scanQRCode', {
|
||
needResult: 1,
|
||
scanType: ['barCode']
|
||
}).then(res => {
|
||
let result = res.resultStr.split(",");
|
||
this.delivery_id = result[1];
|
||
});
|
||
}
|
||
// #endif
|
||
},
|
||
// 预览图片
|
||
previewImage() {
|
||
uni.previewImage({
|
||
urls: [this.expTemp[this.expIndex].pic],
|
||
success: function() {
|
||
|
||
},
|
||
fail: function(error) {
|
||
|
||
}
|
||
});
|
||
},
|
||
// 获取配送员列表
|
||
geTorderOrderDelivery() {
|
||
let funApi = '';
|
||
// if(this.storeNum){
|
||
// funApi = orderOrderDelivery;
|
||
// }else{
|
||
// funApi = storeOrderDelivery;
|
||
// }
|
||
funApi = orderOrderDelivery;
|
||
funApi().then(res => {
|
||
this.postPeople = res.data
|
||
})
|
||
},
|
||
// 配送员选择
|
||
bindPostChange(e) {
|
||
this.postIndex = e.detail.value
|
||
},
|
||
// 选择发货类型
|
||
changeExpTpe(item, index) {
|
||
this.curExpress = item.key
|
||
this.getLogistics(index || '');
|
||
},
|
||
changeType: function(item, index) {
|
||
this.active = index;
|
||
this.delivery_type = item.key;
|
||
},
|
||
getIndex: function() {
|
||
let that = this;
|
||
let funApi = '';
|
||
// if(this.storeNum){
|
||
// funApi = getAdminOrderDelivery;
|
||
// }else{
|
||
// funApi = getStoreOrderDelivery;
|
||
// }
|
||
funApi = getAdminOrderDelivery;
|
||
funApi(that.order_id).then(
|
||
res => {
|
||
that.delivery = res.data;
|
||
},
|
||
error => {
|
||
that.$util.Tips({
|
||
title: error
|
||
})
|
||
}
|
||
);
|
||
},
|
||
getLogistics(status) {
|
||
let that = this;
|
||
getLogistics({
|
||
status
|
||
}).then(
|
||
res => {
|
||
that.logistics = res.data;
|
||
that.getExpTemp(res.data[0].code)
|
||
},
|
||
error => {
|
||
that.$util.Tips({
|
||
title: error
|
||
})
|
||
}
|
||
);
|
||
},
|
||
async saveInfo() {
|
||
let that = this,
|
||
delivery_type = that.delivery_type,
|
||
delivery_name = that.logistics[that.seIndex].name,
|
||
delivery_id = that.delivery_id,
|
||
userName = that.delivery_name,
|
||
save = {};
|
||
save.delivery_type = delivery_type;
|
||
save.delivery_code = that.logistics[that.seIndex].code
|
||
save.delivery_name = that.logistics[that.seIndex].name
|
||
save.type = that.active + 1
|
||
if (delivery_type == 1 && this.curExpress == 1) {
|
||
if (!delivery_id) {
|
||
return this.$util.Tips({
|
||
title: '请填写快递单号'
|
||
})
|
||
}
|
||
save.express_record_type = that.curExpress
|
||
save.delivery_id = delivery_id
|
||
if (that.curGoods) {
|
||
that.setSplitInfo(save)
|
||
} else {
|
||
that.setInfo(save);
|
||
}
|
||
}
|
||
|
||
if (delivery_type == 1 && this.curExpress == 2) {
|
||
if (!that.to_name) {
|
||
return this.$util.Tips({
|
||
title: '请填写寄件人姓名'
|
||
})
|
||
}
|
||
if (!that.to_tel) {
|
||
return this.$util.Tips({
|
||
title: '请填写寄件人手机号码'
|
||
})
|
||
}
|
||
if (!(/^1[3456789]\d{9}$/.test(that.to_tel))) {
|
||
return this.$util.Tips({
|
||
title: '请填写寄件人手机号码'
|
||
})
|
||
}
|
||
if (!that.to_addr) {
|
||
return this.$util.Tips({
|
||
title: '请填写寄件人地址'
|
||
})
|
||
}
|
||
if (that.expTemp.length == 0) {
|
||
return this.$util.Tips({
|
||
title: '请选择电子面单'
|
||
})
|
||
}
|
||
save.express_record_type = that.curExpress
|
||
save.to_name = that.to_name
|
||
save.to_tel = that.to_tel
|
||
save.to_addr = that.to_addr
|
||
save.express_temp_id = that.expTemp[that.expIndex].temp_id
|
||
if (that.curGoods) {
|
||
that.setSplitInfo(save)
|
||
} else {
|
||
that.setInfo(save);
|
||
}
|
||
}
|
||
if (delivery_type == 2) {
|
||
if (!that.postPeople.length) {
|
||
return this.$util.Tips({
|
||
title: '请在平台后台添加送货人'
|
||
})
|
||
}
|
||
let obj = this.postPeople[this.postIndex]
|
||
let params = {}
|
||
params.type = that.delivery_type
|
||
params.sh_delivery_name = obj.wx_name
|
||
params.sh_delivery_id = obj.phone
|
||
params.sh_delivery_uid = obj.uid
|
||
if (that.curGoods) {
|
||
that.setSplitInfo(params)
|
||
} else {
|
||
that.setInfo(params);
|
||
}
|
||
}
|
||
if (delivery_type == 3) {
|
||
let params = {}
|
||
params.type = that.delivery_type;
|
||
params.fictitious_content = that.fictitious_content;
|
||
if (that.curGoods) {
|
||
that.setSplitInfo(params)
|
||
} else {
|
||
that.setInfo(params);
|
||
}
|
||
}
|
||
// switch (delivery_type) {
|
||
// case "2":
|
||
// if (!userName) {
|
||
// return that.$util.Tips({
|
||
// title: '请填写送货人姓名'
|
||
// })
|
||
// }
|
||
// if (!delivery_id || !checkPhone(delivery_id)) {
|
||
// return that.$util.Tips({
|
||
// title: '请填写正确的手机号码'
|
||
// })
|
||
// }
|
||
// save.delivery_name = userName;
|
||
// save.delivery_id = delivery_id;
|
||
// that.setInfo(save);
|
||
// break;
|
||
// case "1":
|
||
// if (!delivery_id) {
|
||
// return this.$util.Tips({
|
||
// title: '请填写快递单号'
|
||
// })
|
||
// }
|
||
// save.delivery_name = delivery_name;
|
||
// save.delivery_id = delivery_id;
|
||
// that.setInfo(save);
|
||
// break;
|
||
// case "3":
|
||
// that.setInfo(save);
|
||
// break;
|
||
// }
|
||
},
|
||
setInfo: function(item) {
|
||
let that = this;
|
||
let funApi = '';
|
||
// if(this.storeNum){
|
||
// funApi = setAdminOrderDelivery;
|
||
// }else{
|
||
// funApi = setStoreOrderDelivery;
|
||
// }
|
||
funApi = setAdminOrderDelivery;
|
||
funApi(that.delivery.id, item).then(
|
||
res => {
|
||
that.$util.Tips({
|
||
title: res.msg,
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
setTimeout(res => {
|
||
if (this.comeType == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/admin/orderDetail/index?id=' + this.order_id+'&storeNum='+this.storeNum
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/admin/orderList/index?types=1'
|
||
})
|
||
}
|
||
}, 2000)
|
||
},
|
||
error => {
|
||
that.$util.Tips({
|
||
title: error
|
||
})
|
||
}
|
||
);
|
||
},
|
||
setSplitInfo(item) {
|
||
if (!this.cartIds.length) {
|
||
return this.$util.Tips({
|
||
title: '请选择发货商品'
|
||
})
|
||
}
|
||
item.cart_ids = this.cartIds
|
||
let funApi = '';
|
||
if(this.storeNum){
|
||
funApi = orderSplitDelivery;
|
||
}else{
|
||
funApi = storeOrderSplitDelivery;
|
||
}
|
||
funApi(this.delivery.id, item).then(res => {
|
||
this.$util.Tips({
|
||
title: res.msg,
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
setTimeout(res => {
|
||
if (this.comeType == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/admin/orderDetail/index?id=' + this.order_id+'&storeNum='+this.storeNum
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/admin/orderList/index?types=1'
|
||
})
|
||
}
|
||
}, 2000)
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: err
|
||
})
|
||
})
|
||
},
|
||
bindPickerChange(e) {
|
||
this.seIndex = e.detail.value
|
||
this.getExpTemp(this.logistics[e.detail.value].code)
|
||
|
||
},
|
||
bindTempChange(e) {
|
||
this.expIndex = e.detail.value
|
||
},
|
||
getExpTemp(code) {
|
||
let funApi = '';
|
||
if(this.storeNum){
|
||
funApi = orderExportTemp;
|
||
}else{
|
||
funApi = storeOrderExportTemp;
|
||
}
|
||
funApi({
|
||
com: code
|
||
}).then(res => {
|
||
this.expTemp = res.data.data
|
||
})
|
||
},
|
||
// 获取订单打印默认配置
|
||
orderDeliveryInfo() {
|
||
let funApi = '';
|
||
// if(this.storeNum){
|
||
// funApi = orderDeliveryInfo;
|
||
// }else{
|
||
// funApi = storeOrderDeliveryInfo;
|
||
// }
|
||
funApi = orderDeliveryInfo;
|
||
funApi().then(res => {
|
||
this.to_name = res.data.to_name;
|
||
this.to_tel = res.data.to_tel;
|
||
this.to_addr = res.data.to_add;
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.picker-add {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.height-add {
|
||
height: 120upx;
|
||
}
|
||
|
||
|
||
/*发货*/
|
||
.deliver-goods {
|
||
padding: 22rpx 20rpx;
|
||
}
|
||
|
||
.deliver-goods .header {
|
||
position: relative;
|
||
padding: 0 32rpx;
|
||
border-radius: 24rpx;
|
||
background: #FFFFFF;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.deliver-goods .header .order-num {
|
||
padding: 20rpx 0;
|
||
border-bottom: 1px dotted #EEEEEE;
|
||
}
|
||
|
||
.deliver-goods .header .order-num .num {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #333333;
|
||
position: relative;
|
||
}
|
||
|
||
.deliver-goods header .order-num .num:after {}
|
||
|
||
.deliver-goods header .order-num .name {
|
||
width: 260upx;
|
||
font-size: 26upx;
|
||
color: #282828;
|
||
text-align: center;
|
||
}
|
||
|
||
.deliver-goods header .order-num .name .iconfont {
|
||
font-size: 35upx;
|
||
color: #477ef3;
|
||
vertical-align: middle;
|
||
margin-right: 10upx;
|
||
}
|
||
|
||
.deliver-goods .header .address {
|
||
padding: 20rpx 0 40rpx;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.deliver-goods .header .address .name {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
line-height: 42rpx;
|
||
color: #333333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.deliver-goods .header .address .name .iconfont {
|
||
margin-right: 8rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.deliver-goods .header .address .name .phone {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.deliver-goods .header .line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4rpx;
|
||
}
|
||
|
||
.deliver-goods .header .line image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.deliver-goods .wrapper {
|
||
padding: 12rpx 0;
|
||
border-radius: 24rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item {
|
||
padding: 0 24rpx;
|
||
height: 80rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
position: relative;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode {
|
||
flex: 1;
|
||
height: 100%;
|
||
text-align: right;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode .iconfont {
|
||
font-size: 32rpx;
|
||
margin-right: 12rpx;
|
||
color: #CCCCCC;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode .goods~.goods {
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode .goods {
|
||
color: #999999;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode .goods.on {
|
||
color: #333333;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .mode .goods.on .iconfont {
|
||
color: #2A7EFB;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item .icon-up {
|
||
position: absolute;
|
||
font-size: 35upx;
|
||
color: #2c2c2c;
|
||
right: 30upx;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item select {
|
||
direction: rtl;
|
||
padding-right: 60upx;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.deliver-goods .wrapper .item input::placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.deliver-goods .confirm-wrapper {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
bottom: constant(safe-area-inset-bottom);
|
||
bottom: env(safe-area-inset-bottom);
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.deliver-goods .confirm {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background: #2A7EFB;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.select-box {
|
||
flex: 1;
|
||
height: 100%;
|
||
|
||
.pickerBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.iconfont {
|
||
margin-left: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.look {
|
||
margin-left: 20rpx;
|
||
color: #1890FF;
|
||
}
|
||
|
||
.textarea {
|
||
display: block;
|
||
min-height: 192rpx;
|
||
padding: 30rpx;
|
||
width: 100%;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.icon-xiangji {
|
||
font-size: 35rpx;
|
||
color: #477ef3;
|
||
}
|
||
|
||
.trip {
|
||
font-size: 22rpx;
|
||
color: #ccc;
|
||
padding: 6rpx 0;
|
||
}
|
||
|
||
.split-wrapper {
|
||
border-radius: 24rpx;
|
||
margin-top: 20rpx;
|
||
background: #FFFFFF;
|
||
|
||
.splitOrder {
|
||
padding: 0 24rpx 46rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.split-switch {
|
||
padding: 40rpx 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
.switch {
|
||
position: relative;
|
||
width: 79rpx;
|
||
height: 48rpx;
|
||
padding: 4rpx;
|
||
border-radius: 24rpx;
|
||
background: #DDDDDD;
|
||
transition: background 0.1s, border 0.1s;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 4rpx;
|
||
left: 4rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 20rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
||
}
|
||
|
||
&.on {
|
||
background: #2A7EFB;
|
||
|
||
&::after {
|
||
transform: translateX(31rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |