|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <view class="app-delivery-module">
|
|
|
+
|
|
|
+ <view class="module-com">
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">订花人姓名</view>
|
|
|
+ <input v-model="form.bookName" placeholder-class="phcolor" placeholder-style="color:#ccc;" style="width:285upx;" class="tui-input" name="bookName" placeholder="请填写姓名" />
|
|
|
+
|
|
|
+ <button class="admin-button-com default mini-btn" @click="changeFillMobile">填手机号</button>
|
|
|
+
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" v-if="fillMobile==1">
|
|
|
+ <view class="tui-title">订花人手机号</view>
|
|
|
+ <input v-model="form.bookMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" type="number" name="bookMobile" placeholder="请填写手机号" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">配送方式</view>
|
|
|
+ <button @tap="form.sendType = 3" class="admin-button-com middle" :class="form.sendType == 3 ? 'blue' : 'default'">骑手送</button>
|
|
|
+ <button @tap="form.sendType = 2" class="admin-button-com middle" style="margin-left:15upx;" :class="form.sendType == 2 ? 'blue' : 'default'">自己送</button>
|
|
|
+ <button @tap="form.sendType = 1" class="admin-button-com middle" style="margin-left:15upx;" :class="form.sendType == 1 ? 'blue' : 'default'">到店自取</button>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <template>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
+ <view class="tui-title" v-if="form.sendType == 1">取花日期</view>
|
|
|
+ <view class="tui-title" v-else>配送日期</view>
|
|
|
+ <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
|
|
|
+ <view v-if="form.reachDate">{{ form.reachDate }}</view>
|
|
|
+ <view v-else>今天</view>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="tui-title" v-if="form.sendType == 1">取花时间</view>
|
|
|
+ <view class="tui-title" v-else>配送时间</view>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">贺卡内容</view>
|
|
|
+ <input v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="cardInfo" placeholder="选填项" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <template v-if="form.sendType != 1">
|
|
|
+
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">收花人姓名</view>
|
|
|
+ <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">收花人手机号</view>
|
|
|
+ <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" type="number" name="receiveMobile" placeholder="请填写手机号" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selectCityFn">
|
|
|
+ <view class="tui-title">所在城市</view>
|
|
|
+ <view class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</view> <view class="tui-placeholder" v-else>请选择</view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
|
|
|
+ <view class="tui-title">详细地址</view>
|
|
|
+ <view class="tui-input" v-if="form.address">{{ form.address }}</view>
|
|
|
+ <view class="tui-placeholder" v-else>请填写地址</view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">门牌号</view>
|
|
|
+ <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="楼号门牌号（选填）" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="form.sendType != 1">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="none-name-delivery flex-center" style="padding-left:0upx;">
|
|
|
+ <view class="tui-title">匿名派送</view>
|
|
|
+ <checkbox-group @change="anonymityChange" style="padding-left:70upx;">
|
|
|
+ <checkbox class="ljd-checkbox" value="1" :checked="form.anonymity == 1" style="transform:scale(0.6,0.6)" id="noneNameText" ></checkbox>
|
|
|
+ <label for="noneNameText" class="none-name-text">需要</label>
|
|
|
+ </checkbox-group>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">备注</view>
|
|
|
+ <textarea style="min-height:100upx;height:auto;" v-model="form.remark" placeholder="选填" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 省市联动 -->
|
|
|
+ <simple-address ref="simpleAddress" :region="regionTree" :pickerValueDefault="cityPickerValueDefault" @onConfirm="getCityConfirm" ></simple-address>
|
|
|
+
|
|
|
+ <!-- 选择详细地址 -->
|
|
|
+ <app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
|
|
|
+
|
|
|
+ </view>
|
|
|
+</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 AppBindInfo from "@/components/app-bind-info";
|
|
|
+import {getShop} from "@/api/common"
|
|
|
+import {getRegion} from "@/api/shop"
|
|
|
+export default {
|
|
|
+ name: "app-delivery-module",
|
|
|
+ components: {
|
|
|
+ AppAreaSel,
|
|
|
+ TuiListCell,
|
|
|
+ AppDatePicker,
|
|
|
+ SimpleAddress,
|
|
|
+ AppBindInfo
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fillMobile:0,
|
|
|
+ region: [],
|
|
|
+ showRegion: false,
|
|
|
+ form: {
|
|
|
+ sendType:3,
|
|
|
+ receiveUserName: "",
|
|
|
+ receiveMobile: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ address: "",
|
|
|
+ showAddress:"",
|
|
|
+ floor: "",
|
|
|
+ fullAddress: "",
|
|
|
+ bookName: '',
|
|
|
+ bookMobile: "",
|
|
|
+ reachDate: '',
|
|
|
+ reachPeriod: "12:00",
|
|
|
+ cardInfo: "",
|
|
|
+ remark: "",
|
|
|
+ anonymity:0,
|
|
|
+ lat:'',
|
|
|
+ long:''
|
|
|
+ },
|
|
|
+ region: {latitude: 0,longitude: 0},
|
|
|
+ regionTree:[],
|
|
|
+ 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']
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let that = this
|
|
|
+ getRegion().then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ that.regionTree = res.data.region
|
|
|
+ getShop().then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ if(res.data.info){
|
|
|
+ that.form.province = res.data.info.province
|
|
|
+ that.form.city = res.data.info.city
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ info: {
|
|
|
+ handler: function(newVal) {
|
|
|
+ if(!this.$util.isEmpty(newVal)){
|
|
|
+ this.form.bookName = newVal.bookName
|
|
|
+ if(!this.$util.isEmpty(newVal.bookMobile)){
|
|
|
+ this.fillMobile = 1
|
|
|
+ }else{
|
|
|
+ this.fillMobile = 0
|
|
|
+ }
|
|
|
+ this.form.bookMobile = newVal.bookMobile
|
|
|
+ this.form.sendType = newVal.sendType
|
|
|
+ if(!this.$util.isEmpty(newVal.reachDate)){
|
|
|
+ this.form.reachDate = newVal.reachDate
|
|
|
+ }
|
|
|
+ if(!this.$util.isEmpty(newVal.reachPeriod)){
|
|
|
+ this.form.reachPeriod = newVal.reachPeriod
|
|
|
+ }
|
|
|
+
|
|
|
+ this.form.cardInfo = newVal.cardInfo
|
|
|
+ this.form.receiveUserName = newVal.receiveUserName
|
|
|
+ this.form.receiveMobile = newVal.receiveMobile
|
|
|
+ this.form.province = newVal.province
|
|
|
+ this.form.city = newVal.city
|
|
|
+ this.form.address = newVal.address
|
|
|
+ this.form.showAddress = newVal.showAddress;
|
|
|
+ this.form.floor = newVal.floor
|
|
|
+ this.form.remark = newVal.remark
|
|
|
+ this.form.anonymity = newVal.anonymity
|
|
|
+
|
|
|
+ this.form.lat = newVal.lat
|
|
|
+ this.form.long = newVal.long
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeFillMobile(){
|
|
|
+ this.fillMobile = this.fillMobile == 0 ? 1 : 0
|
|
|
+ },
|
|
|
+ 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.title;
|
|
|
+ this.form.showAddress = e.address;
|
|
|
+ this.form.lat = e.location.lat;
|
|
|
+ this.form.long = e.location.lng;
|
|
|
+ },
|
|
|
+ timeTodaySelFn(index) {
|
|
|
+ this.form.reachPeriod = index;
|
|
|
+ },
|
|
|
+ anonymityChange() {
|
|
|
+ this.form.anonymity = this.form.anonymity == 1 ? 0 : 1;
|
|
|
+ },
|
|
|
+ selectCityFn() {
|
|
|
+ this.$refs.simpleAddress.open();
|
|
|
+ },
|
|
|
+ getCityConfirm(e) {
|
|
|
+ this.form.province = e.provinceName;
|
|
|
+ this.form.city = e.cityName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: 1px 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: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .delivery-time {
|
|
|
+ @include disFlex(center, center);
|
|
|
+ .button-com {
|
|
|
+ padding-top: 14upx;
|
|
|
+ padding-bottom: 10upx;
|
|
|
+ margin-right:10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 贺卡
|
|
|
+ .gift-wrap {
|
|
|
+ .gift-content {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .need-gift {
|
|
|
+ margin-left: 14upx;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .gitf-textarea {
|
|
|
+ margin-top: 40upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 匿名派送
|
|
|
+ .none-name-delivery {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .none-name-text {
|
|
|
+ margin-left: 10upx;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish