Article From:https://segmentfault.com/q/1010000011140175
Question:

customerMain page


    <template>
    <div class="container">
        <tab>
            <tab-item :selected="index==0" @on-item-click="toggleItem">Follow up record < /tab-item>< tab-item: selected= "index==1" @on-item-click= "toggleItem" > customersHousehold information < /tab-item>< /tab>< swiper: height= "pageHeight" >&lT; router-view> < /router-view>< /swiper>< /div>< /template>&lT; script>Import {Tab, TabItem, Swiper, SwiperItem} from'vux'Import {mapGetters, mapActIons} from'vuex'Import * as types from'../vuex/mutation-types'Export default {Name:'customer',Data () {Return {Height: 180,Index: 0,Tabs: ['follow up record', 'customer information']}},Computed: {... mapGetters (['currentCustomer','clientH']),PageHeight () {RetUrn this.clientH - 44 +'px'}},Methods: {... mapActions (Types.GET_CUSTOMER]),ToggleItem (index) {If (index = = = 0) {This.$router.replace ({name:'followups'})} elseThis.$Router.replace ({name:'info'})},GetCustomer (ID) {This[typEs.GET_CUSTOMER] (ID).Then (resp => {Console.log ("customer")ConSole.log (RESP)Console.log (this.currentCustomer)})}},Components: {Tab, TabItem, Swiper},BeforeEnter (to, from, next) {Console.log ("to")},Created () {This.getCustomer (this.$route.parAms.id)This.$route.name = = = "info"? This.index = 1: this.index = 0}}&lT; /script>< style>< /style>##customerinfo page

<template>

<div class="customer-info">
    <div class="loading-box" v-show="loading">
        <p style="text-align:center;padding:15px;">
            <inline-loading></inline-loading>
            Load in...< /p>< /div>< div v-show= "! Loading" >< group v-if="Customer" label-width= "7rem" label-margin-right= "4rem" label-align= "right" >< x-inPut title= "name" v-model= "customer.name" > < /x-input>< selector title= "sex" placeHolder= "please choose gender": options= "genders" v-model= "customer.sex" > < /selector>< cell TItle= "mobile phone 1": value= "customer.mobilePhone1" > < /cell>< X-input title= "mobile 2" V-ModEl= "customer.mobilePhone2" > < /x-input>< X-input title= "fixed phone" v-model= "customeR.telePhone "> < /x-input>< selector title= "customer nature" placeholder= "please select customer nature": OptionS= "customerNature"V-model= "customer.cstType" > < /selector>< cell title= "home buyers consultant": value= "customer.saleman" is-link> < /cell>< cell title= "creation time": value= "customer.date|formatDate" is-link> < /cell>< /group>&lT; bottom-menu: menuItems= "menus" separator: on-click-item= "clickMenuItem" > < /bottom-menu>< /div>< /div>

</template>

<script>

import {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading} from 'vux'
import {mapState, mapGetters, mapActions} from 'vuex'
import BottomMenu from './bottom-menu/BottomMenu'
import * as types from '../vuex/mutation-types'

export default {
    name: 'CustomerInfo',
    data() {
        return {
            loading: false,
            customer: {
                id: ''
            },
            backUrl: '',
            menus: [
                {text: 'Return 's',{text: 'Save'),{text: 'more')]}},Computed: {... mapState (['customerModule']),... mapGetters (['currentCustomer','gend)Ers','customerNature'])},Methods: {... mapActions ([types.UPDATE_CUSTOMER]),Update () {This.$vux.loading.show ('save in')This[types.UPDATE_CUSTOMER] (this.customer).Then (() => {This.$vux.loading.hide ()This.$vux.toast.Show ({text: 'save successful'))}).Catch (ERR => {This.$vux.loading.hide ()This.$vux.toast.show ({text: err.statusText, type:'warn'})Console.log (ERR)})},ClickMenuItem (index) {If (index = = = 0)This.$router.go (-1)Else if (index = = = 1)This.update ()ElseThis.$router.push ({name:'detail', params: {id: this.customerId}})}},Components: {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading, BottomMenu},Created () {Console.log ("customer information")Console.log (this.currentCustomer)This.cUstomer = Object.assign ({}, this.currentCustomer)}}

</script>

<style>

.loading-box {
    text-align: center;
    padding: 1.8rem 1.5rem;
}

</style>

actionPart of the code

 //Get the basic information of the customer[types.GET_CUSTOMER] ({commit}, payload) {Return new Promise ((resolve, reject)=> {Try {If (payload) {CustomerApi.getCustomer(payload).then (resp => {Commit (types.GET_CUSTOMER, resp.data)Resolve (resp.data)}).catch (ERR => {Commit (types.EXCEPTION, {message: JS)ON.stringify (err.response), func: types.GET_CUSTOMER})Reject (error)})} else {Commit (types.EXCEPTION, {messag)E: "customerId is undefined", func: types.GET_CUSTOMER})Reject (Error ("customerID is undefined ")))}}Catch (E) {Commit (typEs.EXCEPTION, {message: e.message, func: types.GET_CUSTOMER})Reject (e.message)}})},

mutationPart of the code

[types.GET_CUSTOMER](state, payload) {
    state.currentCustomer = payload
},
##stateCode

import actions from ‘./actions’
import mutations from ‘./mutations’
import {LocalStorage} from “../../../utils”
import storeKeys from ‘../../storeKeys’

//User status management
const state = LocalStorage.get(storeKeys.customerKey) || {

followups: [],
currentFollowup: {},
customers: [],
currentCustomer: {
    id: '',
    name: '',
    latestFollowup: {},
    extend: {},
    sex: 0,
    mobilePhone1: "",
    mobilePhone2: "",
    telePhone: "",
    status: "",
    date: "",
    projGUID: "",
    cstType: 0,
    salemanGUID: "",
    saleman: "",
    createBy: "",
    createByName: "",
    followCount: 0
}

}

//State computing attributes
const getters = {

customers: state => state.customers,
currentCustomer: state => state.currentCustomer,
currentFollowup: state => state.currentFollowup,
followups: state => state.followups,
extend: state => state.currentCustomer.extend

}

export default {

state,
getters,
actions,
mutations

}

Answer 0:

The code old iron.

Answer 1:

Add a loading, let the data read first and then load the view

Answer 2:

I don’t know where the problem is. Look at your picture. It means commit has been executed, and vue-devtool has not caught it.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *