|
|
@@ -0,0 +1,684 @@
|
|
|
+<template>
|
|
|
+ <div class="app-delivery-module">
|
|
|
+ <!-- 收花人 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">收花人姓名</div>
|
|
|
+ <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">收花人电话</div>
|
|
|
+ <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveMobile" placeholder="请填写电话" type="number" />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
|
|
|
+ <div class="tui-title">所在城市</div>
|
|
|
+ <div class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择</div>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell v-if="hasMap == 0" class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">详细地址</view>
|
|
|
+ <input v-model="form.address" placeholder-class="phcolor" class="tui-input" name="address" @input="modifyShow" placeholder="请填写地址" />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
|
|
|
+ <div class="tui-title">详细地址</div>
|
|
|
+ <div class="tui-input" v-if="form.address">{{ form.address }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择地址</div>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">门牌号</div>
|
|
|
+ <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="楼号门牌号(选填)" @input="modifyShow" />
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
+ <!-- 订花人 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
+ <div class="tui-title">配送日期</div>
|
|
|
+ <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
|
|
|
+ <div v-if="form.reachDate">{{ form.reachDate }}</div>
|
|
|
+ <div v-else>今天</div>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <div class="tui-title">配送时间</div>
|
|
|
+ <picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
|
|
|
+ <view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <block v-if="openIntraCity == 0">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="delivery-unavailable-notice">
|
|
|
+ <view class="notice-icon">
|
|
|
+ <text class="icon-text">!</text>
|
|
|
+ </view>
|
|
|
+ <view class="notice-content">
|
|
|
+ <view class="notice-title">跑腿配送暂不可用</view>
|
|
|
+ <view class="notice-desc">请选择其他配送方式下单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">距离</view>
|
|
|
+ <view class="tui-input" v-if="showDistance > 0">{{ showDistance }}公里</view>
|
|
|
+ <view class="tui-input" v-else>0公里</view>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">跑腿费</view>
|
|
|
+ <view class="tui-input">
|
|
|
+ <text :class="isFreeDelivery ? 'delivery-price-free' : 'delivery-price-normal'">¥ {{ form.sendCost }}</text>
|
|
|
+ <text v-if="isFreeDelivery" class="free-delivery-tag">【免跑腿费】</text>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <!-- 跑腿平台报价列表 -->
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="deliveryQuotes.length > 0">
|
|
|
+ <view class="delivery-quotes-container">
|
|
|
+ <view class="delivery-quotes-grid">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in deliveryQuotes"
|
|
|
+ :key="index"
|
|
|
+ class="delivery-quote-item"
|
|
|
+ :class="{
|
|
|
+ 'active': selectedDeliveryIndex === index,
|
|
|
+ 'disabled': !item.isAble,
|
|
|
+ 'fixed-width': deliveryQuotes.length <= 2
|
|
|
+ }"
|
|
|
+ @click="selectDelivery(item, index)"
|
|
|
+ >
|
|
|
+ <view class="platform-name">{{ item.displayName || item.name }}</view>
|
|
|
+ <view class="platform-price">{{ item.priceText }}元</view>
|
|
|
+ <view v-if="item.type" class="platform-type">{{ item.type }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-else-if="deliveryQuotesLoading">
|
|
|
+ <view style="text-align: center; padding: 20rpx 0; color: #999;">正在获取报价...</view>
|
|
|
+ </tui-list-cell>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="module-com">
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">贺卡内容</div>
|
|
|
+ <textarea v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="cardInfo" placeholder="请填写" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
+
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">派送方式</div>
|
|
|
+ <div class="delivery-mode-wrapper">
|
|
|
+ <switch :checked="form.anonymity == 1" @change="anonymityChange" color="#ff6b35" />
|
|
|
+ <span v-if="form.anonymity == 0" class="mode-text normal">不匿名</span>
|
|
|
+ <span v-else class="mode-text anonymous">要匿名</span>
|
|
|
+ </div>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">备注内容</div>
|
|
|
+ <textarea v-model="form.remark" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="remark" placeholder="选填,不要贺卡这里备注" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
+ <!-- 省市联动 -->
|
|
|
+ <simple-address ref="simpleAddress" :region="orderShop.region" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm" >
|
|
|
+ </simple-address>
|
|
|
+ <!-- 选择地区 -->
|
|
|
+ <app-area-sel :isFocus="false" :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+import AppDatePicker from "@/components/app-date-picker";
|
|
|
+import SimpleAddress from "@/components/plugin/simple-address";
|
|
|
+import AppAreaSel from "@/components/app-area-sel";
|
|
|
+import { allDeliveryQuotes } from "@/api/express/delivery";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "app-delivery-module",
|
|
|
+ components: {
|
|
|
+ AppAreaSel,
|
|
|
+ TuiListCell,
|
|
|
+ AppDatePicker,
|
|
|
+ SimpleAddress
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 是否开启同城配送
|
|
|
+ openIntraCity: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ hasMap: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ showDistance: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ isFreight: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ hcFreeKm: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ hcMap: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ totalPrice: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showRegion: false,
|
|
|
+ form: {
|
|
|
+ receiveUserName: "", // 收花人姓名;到店自提的姓名
|
|
|
+ receiveMobile: "", // 收花人手机;到店自提的电话;
|
|
|
+ province: "", // 收花人省份
|
|
|
+ city: "", // 收花人城市
|
|
|
+ address: "", // 收花人城市
|
|
|
+ floor: "", // 收花人门楼号和牌号
|
|
|
+ showAddress: "", // 收花人完整地址,从腾讯地图接口获取
|
|
|
+ reachDate: "", // 配送时间
|
|
|
+ reachPeriod: "12:00", // 配送时段,0上午1下午2晚上
|
|
|
+ cardInfo: "", // 贺卡信息
|
|
|
+ remark: "", // 备注
|
|
|
+ anonymity:0,
|
|
|
+ sendCost: 0,
|
|
|
+ deliveryPlatform: '',
|
|
|
+ deliveryPrice: 0,
|
|
|
+ deliveryDistance: 0
|
|
|
+ },
|
|
|
+ region: {
|
|
|
+ latitude: 0,
|
|
|
+ longitude: 0
|
|
|
+ },
|
|
|
+ // 省市联动
|
|
|
+ cityPickerValueDefault: [0, 0],
|
|
|
+ timeOptions: [
|
|
|
+ ['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
|
|
|
+ ['00', '05', '10','15','20','25','30','35','40','45','50','55']
|
|
|
+ ],
|
|
|
+ deliveryQuotes: [], // 跑腿平台报价列表
|
|
|
+ selectedDeliveryIndex: -1, // 选中的报价索引
|
|
|
+ deliveryQuotesLoading: false, // 报价加载状态
|
|
|
+ selectedDeliveryData: null, // 选中的报价数据
|
|
|
+ goodsInfo: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ orderShop: "getOrderShop" }),
|
|
|
+ ...mapGetters({ shopUser: "getShopUser" }),
|
|
|
+ isFreeDelivery(){
|
|
|
+ // 如果父组件没传isFreight,或者isFreight为false,则直接判定为免运费
|
|
|
+ if(!this.isFreight) return true;
|
|
|
+
|
|
|
+ const distanceInMeters = (Number(this.showDistance) || 0) * 1000;
|
|
|
+ const freeKmInMeters = (Number(this.hcFreeKm) || 0) * 1000;
|
|
|
+
|
|
|
+ if (distanceInMeters > 0 && distanceInMeters < freeKmInMeters) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(distanceInMeters > freeKmInMeters){
|
|
|
+ if (this.hcMap && Array.isArray(this.hcMap) && this.hcMap.length > 0) {
|
|
|
+ const goodsInfo = uni.getStorageSync("buyGoodsDetil") || {};
|
|
|
+ const flowerCount = Number(goodsInfo.buyNum || 0);
|
|
|
+ const flowerPrice = (Number(goodsInfo.price) || 0) * flowerCount;
|
|
|
+
|
|
|
+ for (const rule of this.hcMap) {
|
|
|
+ const ruleNum = Number(rule.num) || 0;
|
|
|
+ const rulePrice = Number(rule.price) || 0;
|
|
|
+ const ruleDistance = (Number(rule.distance) || 0) * 1000;
|
|
|
+ if (flowerCount >= ruleNum && flowerPrice >= rulePrice && distanceInMeters <= ruleDistance) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ orderShop(val) {
|
|
|
+ console.log("val", val);
|
|
|
+ this.form.province = val.shop.province ? val.shop.province : "";
|
|
|
+ this.form.city = val.shop.city ? val.shop.city : "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (!this.$util.isEmpty(this.orderShop)) {
|
|
|
+ this.form.province = this.orderShop.shop.province ? this.orderShop.shop.province : ""
|
|
|
+ this.form.city = this.orderShop.shop.city ? this.orderShop.shop.city : ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bindTimeChange(event){
|
|
|
+ let val = event.detail.value
|
|
|
+ let before = Number(val[0])
|
|
|
+ let after = Number(val[1])
|
|
|
+ let timeOptions = this.timeOptions
|
|
|
+ this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after]
|
|
|
+ },
|
|
|
+ selTimeFn(e) {
|
|
|
+ this.form.reachDate = e.detail.value;
|
|
|
+ },
|
|
|
+ // 选择地址
|
|
|
+ selRegionFn() {
|
|
|
+ if (!this.form.city) {
|
|
|
+ this.$msg("请先选择地址!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.showRegion = true;
|
|
|
+ },
|
|
|
+ changeAreaFn(e) {
|
|
|
+ this.form.address = e.name;
|
|
|
+ this.form.showAddress = e.address;
|
|
|
+ let locationStr = e.location
|
|
|
+ let fruits = locationStr.split(",").map(fruit => fruit.trim());
|
|
|
+ this.region.latitude = fruits[1];
|
|
|
+ this.region.longitude = fruits[0];
|
|
|
+ this.triggerGetDeliveryQuotes();
|
|
|
+ },
|
|
|
+ onInputBlur(){
|
|
|
+ this.triggerGetDeliveryQuotes()
|
|
|
+ },
|
|
|
+ anonymityChange(e) {
|
|
|
+ this.form.anonymity = e.detail.value ? 1 : 0;
|
|
|
+ },
|
|
|
+ // 省市联动
|
|
|
+ openAddres() {
|
|
|
+ //城市暂时不可修改 shish 2020.5.11
|
|
|
+ this.$refs.simpleAddress.open();
|
|
|
+ },
|
|
|
+ onCityConfirm(e) {
|
|
|
+ this.form.address = e.label;
|
|
|
+ this.form.province = e.provinceName;
|
|
|
+ this.form.city = e.cityName;
|
|
|
+ },
|
|
|
+ modifyShow(){
|
|
|
+ this.form.showAddress = this.form.province+this.form.city+this.form.address+this.form.floor
|
|
|
+ },
|
|
|
+ triggerGetDeliveryQuotes() {
|
|
|
+ if (this.form.receiveUserName && this.form.receiveMobile && this.form.address) {
|
|
|
+ this.getDeliveryQuotes();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDeliveryQuotes() {
|
|
|
+ this.goodsInfo = uni.getStorageSync("buyGoodsDetil") || {}
|
|
|
+ const weight = (this.goodsInfo.weight || 1) * (this.goodsInfo.buyNum || 1);
|
|
|
+
|
|
|
+ this.deliveryQuotesLoading = true
|
|
|
+ this.deliveryQuotes = []
|
|
|
+ this.selectedDeliveryIndex = -1
|
|
|
+ this.selectedDeliveryData = null
|
|
|
+
|
|
|
+ allDeliveryQuotes({
|
|
|
+ buyType: 'huaShu',//购买类别: 花材、花束
|
|
|
+ totalPrice: this.totalPrice,
|
|
|
+ weight: weight,
|
|
|
+ selectList: [this.goodsInfo],
|
|
|
+ ...this.form,
|
|
|
+ region: this.region
|
|
|
+ }).then(res => {
|
|
|
+ this.deliveryQuotesLoading = false
|
|
|
+ if (res.code == 1 && res.data && res.data.deliveryList) {
|
|
|
+ // 处理报价数据
|
|
|
+ this.deliveryQuotes = res.data.deliveryList
|
|
|
+ .filter(item => item.isAble !== false)
|
|
|
+ .map(item => {
|
|
|
+ const price = item.price ? (item.price / 100).toFixed(1) : '0.0'
|
|
|
+ let displayName = item.name
|
|
|
+ let bracketContent = ''
|
|
|
+ if (displayName && displayName.includes('(')) {
|
|
|
+ //displayName = displayName.split('(')[0].trim()
|
|
|
+ bracketContent = displayName.split('(')[1].replace(')', '')
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ displayName: displayName,
|
|
|
+ priceText: price,
|
|
|
+ priceNumber: parseFloat(price),
|
|
|
+ bracketContent: bracketContent
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const firstAvailableIndex = this.deliveryQuotes.findIndex(item => item.isAble)
|
|
|
+ if (firstAvailableIndex !== -1) {
|
|
|
+ this.selectDelivery(this.deliveryQuotes[firstAvailableIndex], firstAvailableIndex)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂无可用的配送平台',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.deliveryQuotesLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectDelivery(item, index) {
|
|
|
+ if (!item.isAble) return;
|
|
|
+ this.selectedDeliveryIndex = index
|
|
|
+ this.selectedDeliveryData = item
|
|
|
+ this.form.sendCost = this.isFreeDelivery ? 0 : item.priceNumber;
|
|
|
+ this.form.deliveryPlatform = item.en_name;
|
|
|
+ this.form.deliveryPrice = item.priceNumber;
|
|
|
+ this.form.deliveryDistance = item.distance || 0;
|
|
|
+ this.form.deliveryBracketContent = item.bracketContent || '';
|
|
|
+ this.$emit("countFreight", {
|
|
|
+ sendCost: this.form.sendCost,
|
|
|
+ distance: item.distance,
|
|
|
+ deliveryPlatform: item.en_name,
|
|
|
+ deliveryPrice: item.priceNumber,
|
|
|
+ deliveryBracketContent: item.bracketContent
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-delivery-module {
|
|
|
+ .module-com {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .module-tit {
|
|
|
+ padding: 20upx 18upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1upx solid $borderColor;
|
|
|
+ }
|
|
|
+ .module-det {
|
|
|
+ padding: 0 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 公共
|
|
|
+ .line-cell {
|
|
|
+ .tui-title {
|
|
|
+ width: 210upx;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .tui-input {
|
|
|
+ width: calc(100% - 210upx);
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .tui-placeholder {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ .phcolor {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 今天时间选择
|
|
|
+ .delivery-time {
|
|
|
+ @include disFlex(center, center);
|
|
|
+ .button-com {
|
|
|
+ padding-top: 14upx;
|
|
|
+ padding-bottom: 10upx;
|
|
|
+ margin: 0 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 贺卡
|
|
|
+ .gift-wrap {
|
|
|
+ .gift-content {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .need-gift {
|
|
|
+ margin-left: 14upx;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .gitf-textarea {
|
|
|
+ margin-top: 40upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 派送方式选择器样式
|
|
|
+ .delivery-mode-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .mode-text {
|
|
|
+ font-size: 40upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ transition: color 0.3s ease;
|
|
|
+ &.normal {
|
|
|
+ // 不匿名 - 使用页面常规颜色
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.anonymous {
|
|
|
+ // 匿名 - 使用显眼颜色
|
|
|
+ color: #ff6b35;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ switch {
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // textarea样式 - 彻底解决input文字浮动问题
|
|
|
+ .textarea-input {
|
|
|
+ /* 重置textarea默认样式,使其表现像input */
|
|
|
+ resize: none !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ background: transparent !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+
|
|
|
+ /* 固定高度和行高,防止浮动 */
|
|
|
+ height: 44upx !important;
|
|
|
+ max-height: 44upx !important;
|
|
|
+ min-height: 44upx !important;
|
|
|
+ line-height: 44upx !important;
|
|
|
+
|
|
|
+ /* 字体样式保持一致 */
|
|
|
+ font-size: 28upx !important;
|
|
|
+ font-family: inherit !important;
|
|
|
+ color: inherit !important;
|
|
|
+
|
|
|
+ /* 文字单行显示,模拟input行为 */
|
|
|
+ white-space: nowrap !important;
|
|
|
+ text-overflow: ellipsis !important;
|
|
|
+ word-wrap: normal !important;
|
|
|
+ word-break: keep-all !important;
|
|
|
+
|
|
|
+ /* 垂直对齐 */
|
|
|
+ vertical-align: middle !important;
|
|
|
+ text-align: left !important;
|
|
|
+
|
|
|
+ /* 微信小程序特殊处理 */
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ /* 禁用textarea的多行特性 */
|
|
|
+ overflow-y: hidden !important;
|
|
|
+ scrollbar-width: none !important;
|
|
|
+ /* 固定位置,防止键盘影响 */
|
|
|
+ position: relative !important;
|
|
|
+ z-index: 1 !important;
|
|
|
+ /* 禁用文字大小自动调整 */
|
|
|
+ -webkit-text-size-adjust: none !important;
|
|
|
+ text-size-adjust: none !important;
|
|
|
+ /* 强制使用系统字体 */
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif !important;
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ /* H5环境优化 */
|
|
|
+ /* #ifdef H5 */
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ -webkit-appearance: none !important;
|
|
|
+ appearance: none !important;
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ /* APP环境优化 */
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 跑腿平台报价样式 */
|
|
|
+.delivery-quotes-container {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.delivery-quotes-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10rpx;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.delivery-quote-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 0 0 calc(33% - 7rpx);
|
|
|
+ width: calc(33% - 7rpx);
|
|
|
+ min-height: 140rpx;
|
|
|
+ padding: 16rpx 10rpx;
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2rpx solid #DDDDDD;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.fixed-width {
|
|
|
+ flex: 0 0 220rpx;
|
|
|
+ width: 220rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform-name {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.3;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform-price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform-type {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #868686;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #09C567;
|
|
|
+ border-color: #09C567;
|
|
|
+
|
|
|
+ .platform-name,
|
|
|
+ .platform-price,
|
|
|
+ .platform-type {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #F5F5F5;
|
|
|
+
|
|
|
+ .platform-name,
|
|
|
+ .platform-price,
|
|
|
+ .platform-type {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 跑腿费价格样式 */
|
|
|
+.delivery-price-normal {
|
|
|
+ color: #3385FF;
|
|
|
+}
|
|
|
+
|
|
|
+.delivery-price-free {
|
|
|
+ color: #999;
|
|
|
+ text-decoration: line-through;
|
|
|
+}
|
|
|
+
|
|
|
+.free-delivery-tag {
|
|
|
+ color: #3385FF;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 跑腿不可用提示样式 */
|
|
|
+.delivery-unavailable-notice {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx;
|
|
|
+ background: linear-gradient(135deg, #FFF5E6 0%, #FFF9F0 100%);
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border-left: 6rpx solid #FF9800;
|
|
|
+
|
|
|
+ .notice-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #FF9800;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .icon-text {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .notice-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF9800;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #F57C00;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|