2022-04-27 10:00:39 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<!-- 顶部操作条 -->
|
|
|
|
|
|
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
|
|
|
|
|
<block slot="backText">返回</block>
|
|
|
|
|
|
<block slot="content">发布任务</block>
|
|
|
|
|
|
</cu-custom>
|
|
|
|
|
|
<!-- 步骤条 -->
|
|
|
|
|
|
<view class="bg-white padding">
|
|
|
|
|
|
<view class="cu-steps">
|
|
|
|
|
|
<view class="cu-item" :class="index>curStep?'':'text-main-color'" v-for="(stepName, index) in stepList">
|
|
|
|
|
|
<text class='cuIcon-radioboxfill'></text> {{stepName}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 商品信息-->
|
|
|
|
|
|
<view v-if="curStep === 0">
|
|
|
|
|
|
<view class="bg-white margin-top-sm">
|
|
|
|
|
|
<form @submit="submitServInfo">
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title"><text class="text-red">*</text>发布类目</view>
|
|
|
|
|
|
<input :value="formData.category.name" disabled></input>
|
|
|
|
|
|
<button class='cu-btn bg-main-color light shadow' @tap="showModal"
|
|
|
|
|
|
data-target="categoryModal">选择</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title"><text class="text-red">*</text>发布规格</view>
|
|
|
|
|
|
<input name="spec" type="text" placeholder="请输入规格,如200*300cm" :value="formData.spec"></input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title"><text class="text-red">*</text>发布数量</view>
|
|
|
|
|
|
<uni-number-box :min="0" :value="formData.publishNum" @change="changePublishNum">
|
|
|
|
|
|
</uni-number-box>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title"><text class="text-red">*</text>期望价格</view>
|
|
|
|
|
|
<input name="expectPrice" type="digit" placeholder="请输入期望价格"
|
|
|
|
|
|
:value="formData.expectPrice"></input>
|
|
|
|
|
|
<text>参考价<text class="padding-left-xs text-price">100</text></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title"><text class="text-red">*</text>上门时间</view>
|
|
|
|
|
|
<uni-datetime-picker type="datetime" v-model="formData.doorTime" @change="changeDoorTime"
|
|
|
|
|
|
:clear-icon="false" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-bar bg-white">
|
|
|
|
|
|
<view class="action">
|
|
|
|
|
|
上传图片
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="grid col-4 grid-square flex-sub img-grid">
|
|
|
|
|
|
<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index"
|
|
|
|
|
|
@tap="viewImage($event, formData.imgList)" :data-url="item">
|
|
|
|
|
|
<image :src="item" mode="aspectFill"></image>
|
|
|
|
|
|
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)"
|
|
|
|
|
|
:data-index="index">
|
|
|
|
|
|
<text class='cuIcon-close'></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="solids" @tap="chooseImage" v-if="formData.imgList.length<4">
|
|
|
|
|
|
<text class='cuIcon-cameraadd'></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-bar bg-white">
|
|
|
|
|
|
<view class="action">
|
|
|
|
|
|
备注说明
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group margin-bottom-with-bar">
|
|
|
|
|
|
<textarea class="solid radius" maxlength="-1" name="comments" :value="formData.comments"
|
|
|
|
|
|
placeholder="请输入商品的特殊要求或对师傅服务过程中的要求"></textarea>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 下一步 -->
|
|
|
|
|
|
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
|
|
|
|
|
<button class="bg-main-color long-btn margin-lr" form-type="submit">下一步</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 类目抽屉 -->
|
|
|
|
|
|
<view class="DrawerClose" :class="modalName=='categoryModal'?'show':''" @tap="hideModal">
|
|
|
|
|
|
<view class="cuIcon-roundcheckfill text-main-color" @click="chooseCategory"></view>
|
|
|
|
|
|
<view class="cuIcon-roundclosefill"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<scroll-view scroll-y class="DrawerWindow bg-gray" :class="modalName=='categoryModal'?'show':''">
|
|
|
|
|
|
<vertical-nav :list="categoryList" :containerHeight="'calc(100vh - 200rpx)'"></vertical-nav>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-if="curStep === 1">
|
|
|
|
|
|
<view class="margin-top-sm bg-white">
|
|
|
|
|
|
<view v-if="defaultAddress">
|
|
|
|
|
|
<view class="padding margin-lr-sm flex justify-between align-center" @click="showAddress2Choose">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<view class="flex justify-start align-center">
|
|
|
|
|
|
<view class="text-gray margin-right-xs" v-for="(areaObj, index) in defaultAddress.area">
|
|
|
|
|
|
{{areaObj.name}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="text-lg margin-tb-sm">{{defaultAddress.address}}</view>
|
|
|
|
|
|
<view class="text-gray">
|
|
|
|
|
|
<text class="margin-right">{{defaultAddress.person2Contact}}</text>
|
|
|
|
|
|
<text>{{defaultAddress.phone}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="text-lg"><text class="text-bold text-gray cuIcon-right"></text></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-progress sm striped">
|
|
|
|
|
|
<view class="bg-orange" style="width: 100%;"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-else @click="showAddress2Choose">
|
|
|
|
|
|
<view class="flex justify-between align-center padding-lg">
|
|
|
|
|
|
<view class="text-lg text-black">
|
|
|
|
|
|
<text class="cuIcon-locationfill text-blue light"></text>
|
|
|
|
|
|
选择服务地址
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="text-lg">选择<text class="text-bold text-gray cuIcon-right"></text></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-progress sm striped">
|
|
|
|
|
|
<view class="bg-orange" style="width: 100%;"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="bg-white margin-top-sm margin-lr-sm margin-bottom-with-bar">
|
|
|
|
|
|
<form @submit="saveAndUseAddress">
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title">联系人</view>
|
|
|
|
|
|
<input name="person2Contact" placeholder="请输入姓名"></input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title">联系号码</view>
|
|
|
|
|
|
<input name="phone" placeholder="请输入联系号码"></input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title">地址选择</view>
|
|
|
|
|
|
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColumnChange"
|
|
|
|
|
|
:value="multiIndex" :range-key="'name'" :range="areaList">
|
|
|
|
|
|
<view class="picker">
|
|
|
|
|
|
{{areaList[0][multiIndex[0]].name}}，{{areaList[1][multiIndex[1]].name}}，{{areaList[2][multiIndex[2]].name}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</picker>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-form-group">
|
|
|
|
|
|
<view class="title">详细地址</view>
|
|
|
|
|
|
<input name="address" placeholder="请输入小区/写字楼"></input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="padding-tb">
|
|
|
|
|
|
<button class="bg-main-color margin-lr-sm" form-type="submit">保存地址</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="cu-form-group margin-top">
|
|
|
|
|
|
<view class="title">默认地址</view>
|
|
|
|
|
|
<switch class="main-color radius" @change="isDefaultChange" :class="formData.isDefault?'checked':''"
|
|
|
|
|
|
:checked="formData.isDefault?true:false" name="isDefault" :value="formData.isDefault"></switch>
|
|
|
|
|
|
</view> -->
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部操作栏 -->
|
|
|
|
|
|
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
|
|
|
|
|
<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
|
|
|
|
|
|
<button class="bg-main-color long-btn margin-lr" @click="submitPublishOrder">提交订单</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-if="curStep === 2">
|
|
|
|
|
|
<view class="bg-white margin-top-sm margin-bottom-with-bar">
|
|
|
|
|
|
<view class="padding-lg text-center">
|
|
|
|
|
|
<view class="text-price text-sl text-bold">{{formData.expectPrice}}</view>
|
|
|
|
|
|
<view class="text-gray">
|
|
|
|
|
|
{{formData.category.name}}/规格：{{formData.spec}}({{formData.publishNum}}个)
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="margin-top-lg">
|
|
|
|
|
|
<radio-group @change="changePayWay" style="width: 100vw;">
|
|
|
|
|
|
<view class="cu-list menu">
|
|
|
|
|
|
<view class="cu-item text-lg flex justify-between">
|
|
|
|
|
|
<view class="cuIcon-moneybag padding-left text-main-color"><text
|
|
|
|
|
|
class="padding-left-sm text-black">在线支付</text></view>
|
|
|
|
|
|
<radio class="main-color" value="online" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="cu-item text-lg">
|
|
|
|
|
|
<view class="cuIcon-repair padding-left text-main-color"><text
|
|
|
|
|
|
class="padding-left-sm text-black">上门到付</text></view>
|
|
|
|
|
|
<radio class="main-color" value="offline" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</radio-group>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部操作栏 -->
|
|
|
|
|
|
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
|
|
|
|
|
<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
|
|
|
|
|
|
<button class="bg-main-color long-btn margin-lr" @click="nextStep">确认支付</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import verticalNav from '@/components/multi-level-nav/vertical-nav.vue';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
verticalNav
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
curStep: 0,
|
|
|
|
|
|
stepList: ['商品信息', '客户信息', '支付订单'],
|
|
|
|
|
|
modalName: null,
|
|
|
|
|
|
categoryList: [],
|
|
|
|
|
|
tmpCategory: {},
|
|
|
|
|
|
formData: {
|
|
|
|
|
|
imgList: [],
|
|
|
|
|
|
category: {}
|
|
|
|
|
|
},
|
|
|
|
|
|
defaultAddress: null,
|
|
|
|
|
|
areaList: [],
|
|
|
|
|
|
multiIndex: [0, 0, 0]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
|
|
|
this.loadData();
|
|
|
|
|
|
this.bindEvent();
|
|
|
|
|
|
},
|
|
|
|
|
|
onUnload() {
|
|
|
|
|
|
this.offBindEvent();
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
async loadData() {
|
|
|
|
|
|
this.categoryList = await this.$api.data('categoryList');
|
|
|
|
|
|
this.areaList = await this.$api.data('areaList');
|
2022-06-27 17:30:14 +08:00
|
|
|
|
this.defaultAddress = await this.$api.data('defaultAddress');
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '功能开发中，暂无法使用',
|
|
|
|
|
|
icon: 'none'
|
|
|
|
|
|
})
|
2022-04-27 10:00:39 +08:00
|
|
|
|
},
|
|
|
|
|
|
nextStep() {
|
|
|
|
|
|
this.curStep = this.curStep === this.stepList.length - 1 ? this.curStep : ++this.curStep
|
|
|
|
|
|
},
|
|
|
|
|
|
preStep() {
|
|
|
|
|
|
this.curStep = this.curStep === 0 ? 0 : --this.curStep
|
|
|
|
|
|
},
|
|
|
|
|
|
showModal(e) {
|
|
|
|
|
|
this.modalName = e.currentTarget.dataset.target;
|
|
|
|
|
|
},
|
|
|
|
|
|
hideModal(e) {
|
|
|
|
|
|
this.modalName = null
|
|
|
|
|
|
},
|
|
|
|
|
|
bindEvent() {
|
|
|
|
|
|
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.tmpChooseCategory);
|
|
|
|
|
|
uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchCategory);
|
|
|
|
|
|
uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
|
|
|
|
|
|
},
|
|
|
|
|
|
offBindEvent() {
|
|
|
|
|
|
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
|
|
|
|
|
|
uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
|
|
|
|
|
|
uni.$off(this.$globalFun.CHOOSE_ADDRESS);
|
|
|
|
|
|
},
|
|
|
|
|
|
tmpChooseCategory(category) {
|
|
|
|
|
|
this.tmpCategory = category;
|
|
|
|
|
|
console.log("tmpCategory=" + JSON.stringify(category))
|
|
|
|
|
|
},
|
|
|
|
|
|
searchCategory(content) {
|
|
|
|
|
|
console.log("搜索[" + content + "]中......")
|
|
|
|
|
|
},
|
|
|
|
|
|
chooseCategory() {
|
|
|
|
|
|
this.formData.category = this.tmpCategory;
|
|
|
|
|
|
},
|
|
|
|
|
|
changePublishNum(value) {
|
|
|
|
|
|
this.formData.publishNum = value;
|
|
|
|
|
|
},
|
|
|
|
|
|
changeDoorTime(value) {
|
|
|
|
|
|
this.formData.doorTime = value;
|
|
|
|
|
|
},
|
|
|
|
|
|
viewImage(e, imgList) {
|
|
|
|
|
|
uni.previewImage({
|
|
|
|
|
|
urls: imgList,
|
|
|
|
|
|
current: e.currentTarget.dataset.url
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
delImg(e, imgList) {
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '',
|
|
|
|
|
|
content: '确定要删除这张图片吗？',
|
|
|
|
|
|
cancelText: '取消',
|
|
|
|
|
|
confirmText: '确定',
|
|
|
|
|
|
success: res => {
|
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
|
imgList.splice(e.currentTarget.dataset.index, 1)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
chooseImage(e) {
|
|
|
|
|
|
uni.chooseImage({
|
|
|
|
|
|
count: 4, //默认9
|
|
|
|
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
|
|
|
sourceType: ['album'], //从相册选择
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
if (this.formData.imgList.length != 0) {
|
|
|
|
|
|
this.formData.imgList = this.formData.imgList.concat(res.tempFilePaths)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.formData.imgList = res.tempFilePaths
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
regionChange(e) {
|
|
|
|
|
|
this.multiIndex = e.detail.value;
|
|
|
|
|
|
},
|
|
|
|
|
|
showAddress2Choose() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/my/my-address?chooseMode=true'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
chooseAddress(addressInfo) {
|
|
|
|
|
|
this.defaultAddress = addressInfo;
|
|
|
|
|
|
},
|
|
|
|
|
|
saveAndUseAddress(e) {
|
|
|
|
|
|
let addressInfo = e.detail.value;
|
|
|
|
|
|
let valid = this.validateAddress(addressInfo);
|
|
|
|
|
|
if (!valid) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let chosenArea = [];
|
|
|
|
|
|
for (let i = 0; i < this.areaList.length; i++) {
|
|
|
|
|
|
chosenArea.push(this.areaList[i][this.multiIndex[i]]);
|
|
|
|
|
|
}
|
|
|
|
|
|
console.log("chosenArea=" + JSON.stringify(chosenArea))
|
|
|
|
|
|
addressInfo.area = chosenArea;
|
|
|
|
|
|
// 调用后台保存并更新地址选择栏内容
|
|
|
|
|
|
this.defaultAddress = addressInfo;
|
|
|
|
|
|
},
|
|
|
|
|
|
submitServInfo(e) {
|
|
|
|
|
|
let formData = e.detail.value;
|
|
|
|
|
|
this.formData = Object.assign({}, this.formData, formData);
|
|
|
|
|
|
console.log(this.formData)
|
|
|
|
|
|
let valid = this.validateServInfo();
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
this.nextStep();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '请填写必填项信息',
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
submitPublishOrder() {
|
|
|
|
|
|
if (this.defaultAddress && Object.keys(this.defaultAddress).length > 0) {
|
|
|
|
|
|
this.nextStep();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '请选择服务地址',
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
validateServInfo() {
|
|
|
|
|
|
if ((this.formData.category && Object.keys(this.formData.category).length > 0) &&
|
|
|
|
|
|
Boolean(this.formData.spec) &&
|
|
|
|
|
|
Boolean(this.formData.publishNum) &&
|
|
|
|
|
|
Boolean(this.formData.expectPrice) &&
|
|
|
|
|
|
Boolean(this.formData.doorTime)) {
|
|
|
|
|
|
return true
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
},
|
|
|
|
|
|
validateAddress(addressInfo) {
|
|
|
|
|
|
let valid = Boolean(addressInfo.person2Contact) &&
|
|
|
|
|
|
Boolean(addressInfo.phone) &&
|
|
|
|
|
|
Boolean(addressInfo.address);
|
|
|
|
|
|
|
|
|
|
|
|
if (!valid) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '请填写完整信息',
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
})
|
|
|
|
|
|
} else if (!this.$validate.validContactNum(addressInfo.phone)) {
|
|
|
|
|
|
valid = false;
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '联系号码格式错误',
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
return valid;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.DrawerPage {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
left: 0vw;
|
|
|
|
|
|
background-color: #f1f1f1;
|
|
|
|
|
|
transition: all 0.4s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage.show {
|
|
|
|
|
|
transform: scale(0.9, 0.9);
|
|
|
|
|
|
left: 85vw;
|
|
|
|
|
|
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
transform-origin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerWindow {
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 85vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
transform: scale(0.9, 0.9) translateX(-100%);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
transition: all 0.4s;
|
|
|
|
|
|
padding: 100upx 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerWindow.show {
|
|
|
|
|
|
transform: scale(1, 1) translateX(0%);
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerClose {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 40vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
color: transparent;
|
|
|
|
|
|
padding-bottom: 30upx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
|
|
|
|
|
letter-spacing: 5px;
|
|
|
|
|
|
font-size: 60upx;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
transition: all 0.4s;
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerClose.show {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
|
width: 15vw;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* .DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
|
|
|
|
|
width: 64upx;
|
|
|
|
|
|
height: 64upx;
|
|
|
|
|
|
line-height: 64upx;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage .nav {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage .nav .cu-item.cur {
|
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage .nav .cu-item.cur::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
width: 10upx;
|
|
|
|
|
|
height: 10upx;
|
|
|
|
|
|
background-color: currentColor;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 10upx;
|
|
|
|
|
|
border-radius: 10upx;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.DrawerPage .cu-bar.tabbar .action {
|
|
|
|
|
|
flex: initial;
|
|
|
|
|
|
} */
|
|
|
|
|
|
.cu-form-group.img-grid {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cu-progress {
|
|
|
|
|
|
display: inherit;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cu-progress.sm {
|
|
|
|
|
|
height: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
