web-africa-h5/pages/special/goods/index.vue

<template>
    <view class="container">
        <view class="prefecture form-group br12">
            <view class="form-item">
                <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{$t('S_C_86')}}
                </view>
                <input class="form-input" type="text" value="" v-model="form.recName" :placeholder="$t('S_C_70')" />
            </view>
            <view class="form-item">
                <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{$t('MN_F_23')}}
                </view>
                <input class="form-input" type="text" value="" v-model="form.recPhone" :placeholder="$t('S_C_70')" />
            </view>
            <view class="form-item">
                <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{$t('w_0068')}}
                </view>
                <view class="input-box flex-1 d-b-c" @click="showMulLinkageThreePicker">
                    <input class="ml30 f32 " type="text" placeholder-class="grary9"
							:placeholder="$t('w_0069')" v-model="selectCity" disabled="true"
							/>
                    <view class="icon iconfont fb icon-icon1"></view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{$t('S_C_27')}}
                </view>
                <input class="form-input" type="text" value="" v-model="form.recAddress" :placeholder="$t('S_C_70')" />
            </view>
        </view>
        <view class="btnList">
            <view class="normal-sub-btn" @click="clickSearch">查询</view>
            <button class="normal-sub-btn sold" @click="loginOut">{{$t('w_0028')}}</button>
        </view>
        <mpvue-city-picker
			v-if="is_load"
			ref="mpvueCityPicker"
			:province="province"
			:city="city"
			:area="area"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
        <member ref="memberRef" />
    </view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import member from "./member.vue";
export default {
    components: {
		mpvueCityPicker,
		member,
	},
    data() {
        return {
            selectCity: "",
            form: {
                recProvince: 1,
                recPhone: '',
                recName: '',
                recCounty: '',
                recCity: '',
                recAddress: '',
                dizhi: []
            },
            region: {},
			is_load: false,
			province: [],
			city: [],
			area: [],
            cityPickerValueDefault: [0, 0, 0],
        }
    },
    onLoad(){
        this.getCityData();
    },
    onShow() {

    },
    methods: {
        showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show();
		},
        getCityData() {
			let self = this;
			self._get('system/api/area/tree', {}, function(res) {
				self.province = res.data;
				self.is_load = true;
			});
		},
        onConfirm(e) {
            this.selectCity = e.label;
            this.form.dizhi = e.cityCode;
            this.form.recProvince = e.cityCode[0];
            this.form.recCity = e.cityCode[1];
            this.form.recCounty = e.cityCode[2];
		},
        loginOut() {
			let self = this;
			self._delete('member/auth/api/logout', '', result => {
				if (result.code == 200) {
					self.gotoPage('/login','reLaunch');
                    uni.removeStorageSync('Admin-Token');
					uni.removeStorageSync('expires_in');
					uni.removeStorageSync('loginType');
					uni.removeStorageSync('currentPage');
				}
			});
		},
        clickSearch(){
            if(!this.form.recName){
                uni.showToast({
                    title: this.$t('MN_F_T_746'),
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if(!this.form.recPhone){
                uni.showToast({
                    title: this.$t('w_0053'),
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if(!this.form.recProvince && !this.form.recCity && !this.form.recCounty){
                uni.showToast({
                    title: this.$t('S_C_30'),
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if(!this.form.recAddress){
                uni.showToast({
                    title: this.$t('w_0070'),
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            let self = this;
            self._post('member/api/member-special/save-special', self.form, res => {
                const { code } = res;
                if(code == 200){
                    self.$refs.memberRef.open(self.form);
                }
			});
        }
    }
}
</script>

<style lang="scss" scoped>
.btnList {
    position: fixed;
    bottom: 20rpx;

    .sold {
        background: transparent;
        color: #f6220c;
        border: 1px solid #f6220c;
        margin-top: 30rpx;
    }
}
</style>